Question

我有一个包含5个视频的文件夹。我想用HTML / AngularJS编写程序来动态调用文件夹中的视频，而不必在列表中提及视频。

<video id="myvideo" width="320" height="240" controls style="background:black">
   <source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4" 
    type="video/mp4" />
   <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>

var myvid = document.getElementById('myvideo');
myvid.addEventListener('ended', function(e) {
   // get the active source and the next video source.
   // I set it so if there's no next, it loops to the first one
   var activesource = document.querySelector("#myvideo source.active");
   var nextsource = document.querySelector("#myvideo source.active + 
   source") || document.querySelector("#myvideo source:first-child");

   // deactivate current source, and activate next one
   activesource.className = "";
   nextsource.className = "active";

   // update the video source and play
   myvid.src = nextsource.src;
   myvid.play();
});

如果我在程序本身的列表中明确提及视频，则此代码有效。但是我不想那样做。

有什么办法解决吗？预先感谢。

Answer 1

我觉得，您想通过以下方式实现这一目标：

const videoSrcList = [
  "http://www.w3schools.com/html/mov_bbb.mp4",
  "http://www.w3schools.com/html/movie.mp4",
  ...
];
var nextIndex = 1;
var myvid = document.getElementById('myvideo');
myvid.addEventListener('ended', function(e) {
   var activesource = myvid.querySelector("source");
   activesource.src = videoSrcList[nextIndex];
   myvid.play();
});

<video id="myvideo" width="320" height="240" controls style="background:black">
   <source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4" 
    type="video/mp4" />
   <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>

如何从文件夹动态调用视频以循环播放HTML中的所有视频？

1 个答案: