使用媒体片段循环视频?

时间:2014-04-25 22:19:49

标签: javascript html5 html5-video

我试图在暂停时循环播放视频网址(带有媒体片段)。我设置了一个监听器,在视频暂停时调用loopVideo()函数:

function loopVideo() {
    var video = document.getElementById('Video1');
    var videoFile = 'file1.mp4#t=10,10'; 
        video.src = videoFile;
        video.play();       
};

document.getElementById('Video1').addEventListener('paused', loopVideo(), false);

到目前为止,视频片段只播放一次,但暂停时不会循环播放。我的代码中是否有错误或媒体片段存在问题?

2 个答案:

答案 0 :(得分:1)

这是2年后,但我要发布这个,因为我最近遇到了这个问题。基本上我做的是动态获取媒体片段中的值,然后在我的timeupdate视频事件监听器中检查当前时间是否大于媒体片段的上限。如果它大于上限,我将当前时间设置为下限并播放视频。这是我使用的代码:

function checkMediaFragmentBounds(video, x,y) {
   if(video.currentTime > y) {
      video.currentTime = x;
      video.play();
   }
}

然后这是一个正在运行的JSFiddle:JSFiddle,您还可以在其中查看我获取媒体片段边界的逻辑。希望这有助于其他人寻找这个答案,因为我发现这是寻找答案的方式。

答案 1 :(得分:0)

如果您将片段传递到url并触发重新加载,则可以制作自动循环视频:在视频onpause="this.load()"暂停后

<video autoplay onpause="this.load()">
  <source src="video.mp4#t=10,20" type="video/mp4">
</video>