2

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

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

谁能强调为什么这段代码不起作用/建议他们最好的工作？

4

2 回答 2

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。如果问题仍然存在，作为最坏的情况，您可以强制库在支持的地方（即桌面）使用 Flash，并在不支持的地方回退到 HTML5（如此处所述）。

于 2012-11-07T12:44:13.447 回答
0

这是循环多个视频的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>
于 2014-12-04T02:26:33.453 回答