使用 JavaScript 控制 HTML5 视频播放器循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3455229/
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
Control HTML5 video player loop with JavaScript
提问by jeffreynolte
I am looking to enable looping of HTML5 video in browsers that do not support the loop tag (ff) with JavaScript. Does anyone know the feasibility of accessing the end of the video play and reverting playback to zero?
我希望在不支持 JavaScript 循环标记 (ff) 的浏览器中启用 HTML5 视频循环。有谁知道访问视频播放结束并将播放恢复为零的可行性？
回答by CMS
You can detect if the loopproperty is supported, and set it to true.
您可以检测该loop属性是否受支持，并将其设置为true.
For browsers that don't support it, you can simply bind the endedmedia event, and start it over:
对于不支持它的浏览器，你可以简单地绑定ended媒体事件，然后重新开始：
var myVideo = document.getElementById('videoId');
if (typeof myVideo.loop == 'boolean') { // loop supported
myVideo.loop = true;
} else { // loop property not supported
myVideo.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
}
//...
myVideo.play();
回答by Bipul Roy
You can simply loop the video on or off through loop="false"for stopping auto video repeat play.
您可以简单地循环打开或关闭loop="false"视频以停止自动视频重复播放。
<iframe style="position: absolute; top: 0; left: 0;"
src="http://video/name.mp4" width="100%" height="100%" frameborder="0" webkitallowfullscreen loop="true" controls="false" mozallowfullscreen allowfullscreen></iframe>
This loop="true"will enable video player loop.
这loop="true"将启用视频播放器循环。
回答by dxpkumar
<div>Iteration: <span id="iteration"></span></div>
<video id="video-background" autoplay="" muted="" controls>
<source src="https://res.sdfdsf.mp4" type="video/mp4">
</video>
var iterations = 1;
document.getElementById('iteration').innerText = iterations;
var myVideo = document.getElementById('video-background');
myVideo.addEventListener('ended', function () {
alert('end');
if (iterations < 2) {
this.currentTime = 0;
this.play();
iterations ++;
document.getElementById('iteration').innerText = iterations;
}
}, false);
// Please note that loop attribute should not be there in video element in order for the 'ended' event to work in ie and firefox
