循环html5视频使用已结束事件中断

时间:2012-11-07 11:37:15

标签: html5 loops video html5-video

我正在寻找一个简单的循环html5视频的圣杯,我目前正在使用以下代码似乎无法正常工作

<video width="650" height="650" class="outer_shadow" autoplay="" ended="this.play()" loop>
    <source src="/videos?video_id=ag1kZXZ-anQtd2luZG93cg4LEghUaW1lRGF0YRgNDA">
</video>

任何人都可以为什么这段代码不起作用/建议他们最好的工作?

2 个答案:

答案 0 :(得分:1)

当然,您只需设置loop属性(请参阅Chrome中测试的fiddle):

<video id="myVideo" width="650" height="650" class="outer_shadow" autoplay loop>
    <source src="http://content.bitsontherun.com/videos/nPripu9l-60830.mp4">
</video>​

如果firefox仍然不喜欢loop属性,请尝试以下修复:

document.getElementById('myVideo').addEventListener('ended', function(){
    this.currentTime = 0;
}, false);

<强>更新

也许并不像您希望的那样简单,但作为解决问题的方法,可能值得尝试许多HTML5视频库中的一个,例如video.js。如果问题仍然存在,那么在最坏的情况下,您可以强制库在支持的地方使用Flash(即桌面),然后再回到HTML5,而不是(如here所述)。

答案 1 :(得分:0)

以下是fiddle,其中包含循环播放多个视频的HTML5视频播放器的工作示例。只需将您的网址添加到src数组......

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<video id="video" width="500" height="400" controls autoplay></video>
<script>
var src = [
 "http://content.adfox.ru/131007/adfox/205544/865991_11.mp4",
 "http://all.rutube.ru/130627/gpmdigital/217059/805529_11.mp4"
];
var curSrc = 0;
$(function() {
 $('#video').attr("src", src[curSrc % src.length]);
 curSrc++;
 var video = $('#video').get(0);

 $('#video')
 .on('loadedmetadata', function() {
  video.currentTime=0.01;
  video.play();
 })
 .on('ended', function() {
  console.log('ended');
  video.src = src[curSrc % src.length];
  video.load();
  curSrc++;
 });
});
</script>