javascript - 动态获取 HTML5 视频文件

Question

我有一个 HTML5 视频播放器，我想让它充当视频播放列表。主要问题是它获取的视频是一个名为“video.ogg”的文件，但它总是每 1-2 秒被覆盖一次，并且持续时间小于 1 秒。我可以有类似的东西，

视频_1 视频_2 视频_3 ... ..

但我认为只有一个文件可以让事情变得更干净并且不占用大量空间。

现在从 JS 方面我得到了这个：

function play_live_video_test(){
    console.log('Started!!');
    var i=1;
    setInterval(function() {
      console.log(' ->Fetching!!');
      video=fetch_video();
      console.log(' ->Updating Source!!');
      video.src="../../video.ogg";
      console.log(' ->Loading!!');
      video.load();
      console.log(' ->Playing!!');
      video.play();
      i++;
      console.log("Value of i: "+i);
    }, 1000);

    console.log('Ended!!!');
};

function fetch_video(){
  var video=document.getElementById('video');
  return video;
};

所以每 1000 毫秒我都会“更新”视频标签的来源，并播放视频，但似乎它不起作用！

任何想法如何解决这一问题？或者使用 HTML5 视频实现视频播放列表？

Answer 1

当您在视频中获得ended事件时更新源，而不是在特定时间过去之后。