컨트롤 html5 비디오 플레이어 루프 (JavaScript 포함)

Question

JavaScript를 사용하여 루프 태그 (ff)를 지원하지 않는 브라우저에서 html5 비디오를 반복 할 수있게하려고합니다. 비디오 재생의 끝 부분에 액세스하고 재생을 0으로 되 돌리는 타당성을 아는 사람이 있습니까?

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"은 비디오 플레이어 루프를 활성화합니다.