在 HTML5 中播放无限循环的视频加载答案

【问题标题】：Play infinitely looping video on-load in HTML5在 HTML5 中播放无限循环的视频加载
【发布时间】：2012-05-09 18:50:18
【问题描述】：

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

以前我会通过Flash 和FLVPlayback 完成此操作，但我更愿意在HTML5 领域避开Flash。我想我可以使用 javascript 的 setTimeout 创建一个平滑的循环，但我应该用什么来嵌入视频本身？有什么东西可以像FLVPlayback 那样流式传输视频吗？

【问题讨论】：

标签： html video video-streaming html5-video

【解决方案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>

如果您的循环属性有问题（就像我们过去遇到的那样），请监听videoEnd 事件并在它触发时调用play() 方法。

注意 1：我不确定 Apple 的 iPad/iPhone 上的行为，因为它们对 autoplay 有一些限制。

注意 2：loop="true" 和 autoplay="autoplay" 已弃用

【讨论】：

确实是个好建议，先生。我最终使用javascript 来监听videoEnd 事件，并循环回到开头，据我所知，并非所有浏览器都支持loop 属性。对于 iOS 设备，它们不支持 iOS 5 的任何形状或形式的autoplay，所以我只使用了移动设备的后备图像。再次感谢。
使用
@vaxquis 感谢更新，欢迎您下次编辑api更改！
没问题，伙计，总是乐于助人。不过，我不会将 XHTML 类型的属性 'autoplay="autoplay"' 与 HTML 类型的 'loop' 混合使用——我会使用
一般情况下，autoplay 仅在您同时使用muted 时才可在 Safari 中使用：webkit.org/blog/7734/auto-play-policy-changes-for-macos

【解决方案2】：

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

因此，你应该使用

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

【讨论】：

【解决方案3】：

对于 iPhone，如果您也添加 playinline 则它可以工作：

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

【讨论】：

JSX 的道具：autoPlay loop muted playsInline

【解决方案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();

});

【讨论】：