在 HTML5 中加载无限循环视频

Question

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

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

原文由 stefmikhail 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

loop 属性应该这样做：

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

Chrome 需要添加不直观的 muted 属性，如其 开发网站上 所述。

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

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

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

原文由 longi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

因此，你应该使用

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

原文由 mic 发布，翻译遵循 CC BY-SA 4.0 许可协议