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

问题描述

我正在寻找将视频放入HTML5页面，该页面将在页面加载时开始播放，并且一旦完成，就可以不间断地循环回去。视频还应该不与其关联，并且与所有'现代'浏览器兼容，或者可以选择填充。

以前我会通过 Flash 和 FLVPlayback 完成此操作，但我宁愿避开 Flash 在HTML5球体中。我想我可以使用JavaScript的 setTimeout 创建一个平滑的循环，但是我应该使用什么来嵌入视频本身？有没有什么东西可以按照 FLVPlayback 的方式传输视频？ 解决方案

loop 属性应该这样做：

 < video width =320height =240自动播放循环> 
< source src =movie.mp4type =video / mp4/> 
< source src =movie.oggtype =video / ogg/> 
您的浏览器不支持视频标记。 
< / video> 
  

如果你有循环属性的问题（就像我们过去一样），听听 videoEnd 事件并在触发时调用 play（）方法。

$ b $注1：我不确定苹果iPad / iPhone的行为，因为它们对 autoplay 有一些限制。

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

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.

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?

解决方案

The loop attribute should do it:

<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>

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.

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

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

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