Play infinitely looping video on-load in HTML5

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?

319846 次浏览
小开
最佳答案

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>

The addition of the unintuitive muted attribute is required by Chrome as 记录在他们的开发站点上.

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

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

注2: 不推荐使用 loop="true"和 autoplay="autoplay"

小开

你可以通过以下两种方式来做到这一点:

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();


});
小开

As of April 2018, Chrome (along with several other major browsers) now require the muted attribute too.

Therefore, you should use

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

对于 iPhone 来说，如果你添加 playsinline，那么它就可以工作了:

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

提交答案