kiểm soát vòng lặp trình phát video html5 với JavaScript

Question

Tôi đang tìm cách bật vòng lặp của video html5 trong các trình duyệt không hỗ trợ thẻ vòng lặp (ff) bằng JavaScript. Có ai biết tính khả thi của việc truy cập vào cuối của phát video và hoàn nguyên phát lại không?

Answer 1

Bạn có thể phát hiện xem thuộc tính loop có được hỗ trợ không và đặt thành true.

Đối với các trình duyệt không hỗ trợ nó, bạn chỉ có thể ràng buộc các sự kiện ended phương tiện truyền thông, và bắt đầu nó trên:

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

Bạn có thể chỉ đơn giản là vòng lặp video hoặc tắt qua loop="false" cho dừng tự động phát lại video.

<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> 

Điều này loop="true" sẽ bật vòng lặp trình phát video.