在HTML5中播放无限循环视频

Question

我希望将视频放在HTML5页面中,该页面将在页面加载时开始播放,一旦完成,就会循环回到开头而不会中断.视频也应该不具有任何相关的控制,以及或者是兼容所有"现代"的浏览器,或有填充工具的选项.

以前我会通过Flash和我这样做FLVPlayback,但我宁愿Flash在HTML5领域避开.我想我可以使用javascript setTimeout创建一个平滑的循环,但我应该用什么来嵌入视频本身？那里有什么东西会以这种方式传输视频FLVPlayback吗？

Answer 1

该循环属性应该这样做:

<video width="320" height="240" autoplay loop>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

如果你对loop属性有问题(就像我们过去那样),请监听videoEnd事件并play()在触发时调用该方法.

注1:我不确定Apple的iPad/iPhone上的行为,因为它们有一些限制autoplay.

注2:loop="true"并且 autoplay="autoplay"已弃用

Answer 2

对于 iPhone，如果您还添加了 playinline，它就可以工作，因此：

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>

Answer 3

截至2018年4月,Chrome(以及其他几个主流浏览器)现在也需要该muted属性.

因此,你应该使用

<video width="320" height="240" autoplay loop muted>
  <source src="movie.mp4" type="video/mp4" />
</video>

Answer 4

您可以通过以下两种方式执行此操作：

1）loop在视频元素中使用属性（在第一个答案中提到）：

2）您可以使用ended媒体事件：

window.addEventListener('load', function(){
    var newVideo = document.getElementById('videoElementId');
    newVideo.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);

    newVideo.play();

});