循环HTML5视频使用最终事件破裂

Question

我正在寻找简单循环的HTML5视频的圣杯，我目前正在使用以下代码，该代码似乎不起作用

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

任何人都可以hilight为什么此代码不起作用/建议他们最好的工作around？

Answer 1

肯定您只需要设置loop属性（请参阅Chrome中测试的小提琴）：

<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。如果问题仍然存在，您可以迫使图书馆在受支持的地方使用闪光灯（即桌面），而倒下到html5（如此处解释）。

Answer 2

这是带有HTML5视频播放器的工作示例的小提琴，可以循环多个视频。只需将您的URL添加到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>