在HTML5中播放无限循环视频

Question

我希望将视频放在HTML5页面中，该页面将在页面加载时开始播放，一旦完成，就会循环回到开头而不会中断。视频也不应该有任何与之相关的控件，要么与所有“现代”浏览器兼容，要么可以选择填充。

以前我会通过Flash和FLVPlayback做到这一点，但我更倾向于避开HTML5领域中的Flash。我想我可以使用javascript的setTimeout创建一个平滑的循环，但我应该用什么来嵌入视频本身？那里有什么东西会像FLVPlayback那样流式传输视频吗？

Answer 1

loop属性应该这样做：

<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

截至2018年4月，Chrome（以及其他几个主流浏览器）现在也在require muted属性。

因此，你应该使用

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

Answer 3

对于iPhone，如果你添加playinline所以它是有效的：

<video width="320" height="240" autoplay loop muted playsinline>
  <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();

});