使用结束的事件循环html5视频答案

【问题标题】：loop html5 video using ended event broken使用结束的事件循环html5视频
【发布时间】：2012-11-07 11:37:15
【问题描述】：

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

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

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

【问题讨论】：

标签： html loops video html5-video

【解决方案1】：

当然你只需要设置loop 属性（参见fiddle 在 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。如果问题仍然存在，作为最坏的情况，您可以强制库在支持的地方（即桌面）使用 Flash，并在不支持的地方回退到 HTML5（如here 所述）。

【讨论】：

显然，如果您的视频服务器没有启用部分内容请求，那么循环属性将被 chrome 忽略，我应该将此添加到我最初的问题中。您上面的脚本，我是否正确地说我只需将其放在
您能否创建一个 jsfiddle 来演示问题或链接到您的示例？
这是我必须使用的视频文件的示例 (jsfiddle.net/AvqUy)
是的，看起来 chrome 正在做一些奇怪的事情。如果您让它播放，然后右键单击并从上下文菜单中选择播放，它也不会播放。这向我表明，该问题没有客户端解决方法。正如您所观察到的，Chrome 似乎没有触发“结束”事件。我的想法是监听“timeupdate”事件（被触发）并在视频结束之前循环播放视频（jsfiddle.net/AvqUy/11），但这也不起作用。我认为您无法修复您的服务器/找到另一个服务器？
不幸的是没有，我现在坚持下去，我得继续寻找解决方法

【解决方案2】：

这里是fiddle，它是循环播放多个视频的 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>

【讨论】：