Html 在 HTML5 中播放无限循环加载的视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10377453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Play infinitely looping video on-load in HTML5
提问by stefmikhail
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 NOThave any controls associated with it, and either be compatible with all 'modern' browsers, or have the option of a polyfill.
我希望将视频放置在 HTML5 页面中，该页面将在页面加载时开始播放，完成后，不间断地循环回到开头。视频也应该不具有任何相关的控制，以及无论是与所有的“现代”的浏览器兼容，或者有填充工具的选项。
Previously I would have done this via Flashand FLVPlayback, but I would prefer to steer clear of Flashin the HTML5 sphere. I'm thinking I could use javascript's setTimeoutto 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 FLVPlaybackwould?
以前我会通过Flash和完成此操作FLVPlayback，但我更愿意避开FlashHTML5 领域。我想我可以使用 javascriptsetTimeout来创建一个平滑的循环，但是我应该使用什么来嵌入视频本身？有什么东西可以像这样流式传输视频FLVPlayback吗？
回答by longi
The loopattribute 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 videoEndevent and call the play()method when it fires.
如果循环属性有问题（就像我们过去遇到的那样），请监听videoEnd事件并play()在它触发时调用该方法。
Note1: I'm not sure about the behavior on Apple's iPad/iPhone, because they have some restrictions against autoplay.
注 1：我不确定 Apple 的 iPad/iPhone 上的行为，因为它们对autoplay.
Note2: loop="true"and autoplay="autoplay"are deprecated
注2：loop="true"和 autoplay="autoplay"已弃用
回答by micah5
回答by Raluca Albu
For iPhone it works if you add also playsinline so:
对于 iPhone，如果您还添加了 playinline，它就可以工作，因此：
<video width="320" height="240" autoplay loop muted playsinline>
<source src="movie.mp4" type="video/mp4" />
</video>
回答by asmmahmud
You can do this the following two ways:
您可以通过以下两种方式执行此操作：
1) Using loopattribute in video element (mentioned in the first answer):
1）loop在视频元素中使用属性（在第一个答案中提到）：
2) and you can use the endedmedia event:
2）你可以使用ended媒体事件：
window.addEventListener('load', function(){
var newVideo = document.getElementById('videoElementId');
newVideo.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
newVideo.play();
});
