Phát video lặp vô hạn khi tải trong HTML5

Question

Tôi đang tìm cách đặt video trong trang HTML5 sẽ bắt đầu phát khi tải trang và sau khi hoàn thành, lặp lại từ đầu mà không bị gián đoạn. Video cũng phải NOT có bất kỳ điều khiển nào được liên kết với nó và tương thích với tất cả các trình duyệt 'hiện đại' hoặc có tùy chọn chèn lấp.

Trước đây tôi đã thực hiện điều này qua Flash và FLVPlayback, nhưng tôi muốn tránh xa rõ ràng Flash trong hình cầu HTML5. Tôi nghĩ tôi có thể sử dụng số setTimeout của javascript để tạo vòng lặp mượt mà, nhưng tôi nên sử dụng cái gì để nhúng video? Có điều gì đó ở đó sẽ phát video theo cách FLVPlayback sẽ không?

Answer 1

Các loop thuộc tính nên làm điều đó:

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

Nếu bạn có một vấn đề với các thuộc tính lặp (như chúng tôi đã có trong quá khứ), lắng nghe sự kiện videoEnd và gọi phương thức play() khi nó cháy.

Lưu ý1: Tôi không chắc chắn về hành vi trên iPad/iPhone của Apple, vì chúng có một số hạn chế đối với autoplay.

Note2: loop="true" và autoplay="autoplay" đang bị phản đối

Answer 2

Bạn có thể làm điều này trong hai cách sau:

1) Sử dụng loop thuộc tính trong phần tử video (được đề cập trong câu trả lời đầu tiên):

2) và bạn có thể sử dụng các sự kiện ended phương tiện truyền thông:

window.addEventListener('load', function(){ 
    var newVideo = document.getElementById('videoElementId'); 
    newVideo.addEventListener('ended', function() { 
     this.currentTime = 0; 
     this.play(); 
    }, false); 

    newVideo.play(); 

});