Как добавить видео в плейлист, нажав на кнопку с источником

У меня проблема, я хочу добавить видео по кнопке с источником в плейлист. Что-то типа... Во время воспроизведения первого видео есть 3 кнопки с источниками мп4. Когда я нажимаю на эти кнопки, они начинают играть. Все работает, но мне это не нужно. Я хочу сделать функцию, когда я нажимаю кнопку, видео начинает воспроизводиться после первого видео. Что-то вроде Flowplayer — http://flash.flowplayer.org/demos/plugins/javascript/playlist/dynamic.html добавить в позицию 2.

<body>

    <div style="overflow: hidden;">
        <video id="video" width="80%" autoplay controls >
            <source id="videoSource" src="video/0.mp4" type="video/mp4">

        </video>

        <a class="btn blue" onclick="changevideo0()">0</a>
        <a class="btn blue" onclick="changevideo1()">1</a>
        <a class="btn blue" onclick="changevideo2()">2</a>
    </div>



    <script>

        function changevideo0() {
        document.getElementById('video').src = "video/0.mp4";}

        function changevideo1() {
        document.getElementById('video').src = "video/1.mp4";}

        function changevideo2() {
        document.getElementById('video').src = "video/2.mp4";}


    </script>


</body>

javascript html video playlist
person V.Bôtoš    schedule 23.03.2016    source источник
comment
Используйте комбинацию этого и это. Сначала получите продолжительность видео, установите таймер на истечение срока действия, установите новое видео и начните воспроизведение. Для функции я бы просто рекомендовал добавить источник в список очередей (массив) и удалить первый элемент, когда истечет время таймера, и повторить процесс.   -  person Xorifelse    schedule 23.03.2016
comment
Спасибо, я попытаюсь справиться с этим ... Но я не знаю, если я слишком искусен, чтобы сделать это :)   -  person V.Bôtoš    schedule 23.03.2016

Ответы (2)


arrow_upward
0
arrow_downward

Я немного изменил вашу функцию, потому что неэффективно добавлять столько функций только для изменения одной ее части.

Ваш код был довольно хорош, просто указывал на неправильный элемент.

        function changevideo(source) {
          document.getElementById('videoSource').src = source;
        }
<body>

    <div style="overflow: hidden;">
        <video id="video" width="80%" autoplay controls >
            <source id="videoSource" src="video/0.mp4" type="video/mp4">

        </video>

        <a class="btn blue" onclick="changevideo('video/0.mp4')">0</a>
        <a class="btn blue" onclick="changevideo('video/1.mp4')">1</a>
        <a class="btn blue" onclick="changevideo('video/2.mp4')">2</a>
    </div>

</body>

person colecmc    schedule 23.03.2016
comment
Спасибо за попытку помочь, это кажется правильным и логичным, но не работает. - person V.Bôtoš; 23.03.2016
comment
Это работает прямо здесь: output.jsbin.com/zihehedafu, если вы наблюдаете сгенерированный источник при нажатии каждый номер, атрибут src обновляется. Что происходит на вашем конце? - person colecmc; 23.03.2016

arrow_upward
0
arrow_downward

Вы должны рассматривать следующий пример как логический код, так как я не тестировал, не проверял синтаксические ошибки и не знаю, должен ли я получить длину видео из источника или элемента проигрывателя в HTML.

<body>
    <script>
        var player = document.getElementById("video");

        var videolist = {
          'video/0.mp4',
          'video/1.mp4',
          'video/2.mp4'
        };

        var queuelist = {};

        function changevideo() {
          if(!queuelist.length == 0){
            document.getElementById('videoSource').src = queuelist.shift();
            setTimeout(changevideo, player.length * 1000);
          } else {
            alert("no more video's in queue");
          }
        }

        player.play();
        setTimeout('changevideo', player.length * 1000);
    </script>

    <div style="overflow: hidden;">
        <video id="video" width="80%" autoplay controls >
            <source id="videoSource" src="video/0.mp4" type="video/mp4">
        </video>

        <a class="btn blue" onclick="queuelist.append(0)">0</a>
        <a class="btn blue" onclick="queuelist.append(1)">1</a>
        <a class="btn blue" onclick="queuelist.append(2)">2</a>
    </div>
</body>
person Xorifelse    schedule 23.03.2016