在 HTML5 中播放无限循环加载的视频 [英] Play infinitely looping video on-load in HTML5

问题描述

我希望将视频放置在 HTML5 页面中，该页面将在页面加载时开始播放，完成后，不间断地循环回到开头.该视频还应该不有任何与之关联的控件，并且要么与所有现代"浏览器兼容，要么具有 polyfill 的选项.

I'm looking to place a video in an HTML5 page that will begin playing on page-load, and once completed, loop back to the beginning without a break. The video should also NOT have any controls associated with it, and either be compatible with all 'modern' browsers, or have the option of a polyfill.

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

Previously I would have done this via Flash and FLVPlayback, but I would prefer to steer clear of Flash in the HTML5 sphere. I'm thinking I could use javascript's setTimeout to create a smooth loop, but what should I use to embed the video itself? Is there something out there that will stream the video the way FLVPlayback would?

推荐答案

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() 方法.

Should you have a problem with the loop attribute (as we had in the past), listen to the videoEnd event and call the play() method when it fires.

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

Note1: I'm not sure about the behavior on Apple's iPad/iPhone, because they have some restrictions against autoplay.

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

Note2: loop="true" and autoplay="autoplay" are deprecated

这篇关于在 HTML5 中播放无限循环加载的视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！