Question

我有一系列视频链接，我需要在一个循环中连续播放。我尝试了下面的链接，但它对我不起作用。 how to display multiple videos one by one dynamically in loop using HTML5 and javascript 我的数组是

   player1=["videoplayback (1).mp4","videoplayback (2).mp4","videoplayback (3).mp4"];

我的代码是：

function playit()
{
    var t=['videoplayback.mp4','videoplayback (1).mp4','videoplayback (3).mp4'];
    var myNodelist = document.getElementsByTagName("source");
    var i;
    for (i = 0; i < myNodelist.length; i++) {
       myNodelist[i].src = t[i];
   }
   }

这是我的视频播放器的HTML代码：

 <body onload="playit()">        
    <video id="video" width="420" autoplay="" loop="" controls="" style="margin-top: 30px;margin-left:40px" >
    <source src="" type="video/mp4" id="video1">
    <source src="" type="video/mp4" id="video2">
    <source src="" type="video/mp4" id="video3">
    Your browser does not support HTML5 video.
    </video>
    </body>

Answer 1

您可以执行类似于在数组中包含源文件并添加事件侦听器的操作，以便每次视频完成播放时都会切换到新的源文件。第一次你必须进行onload，以便第一次调用js函数myNewSrc（）来加载第一个视频。为此，它看起来像这样：

HTML：

<body onload="myNewSrc()">
    <div id="section-title" >
        <video preload="auto" onended="myAddListener()" autoplay controls width="480" height="360" title="" poster="https://placehold.it/350x150">
        <source src="" type="video/mp4">
        </video>
    </div>
</body>

JS：

//array of video source files you will be looping through
var videoSources = ["http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.html5videoplayer.net/videos/toystory.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"];

          var currentIndex = 0;
    // listener function changes src
          function myNewSrc() {
              var myVideo = document.getElementsByTagName('video')[0];
              myVideo.src = videoSources[currentIndex];
              myVideo.load();
          }


    // add a listener function to the ended event
          function myAddListener(){
              var myVideo = document.getElementsByTagName('video')[0];
              currentIndex = (currentIndex+1) % videoSources.length;
              myVideo.src = videoSources[currentIndex];
              myVideo.addEventListener('ended', myNewSrc, false);

          }

您可以在此处查看工作示例：https://jsfiddle.net/l33tstealth/pnjchwyf/1/

无法使用javascript播放视频数组

1 个答案: