使用JavaScript控制html5视频播放器循环

Question

我期望在不支持使用JavaScript的循环标记（ff）的浏览器中启用html5视频循环。有谁知道访问视频播放结束的可行性并将播放恢复为零？

Answer 1

您可以检测到loop属性是否受支持，并将其设置为true。

对于不支持的话，你可以简单地绑定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(); 

Answer 2

<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 

Answer 3

你可以简单地环上的视频或关闭通过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> 

这loop="true"将启用视频播放器循环。