Odtwarzam nieskończenie zapętlone wideo w HTML5

Question

Czekam na umieszczenie wideo na stronie HTML5, która rozpocznie odtwarzanie na stronie ładowanie, a po zakończeniu pętla powrót do początku bez przerwy. Film wideo powinien również mieć NOT mieć jakiekolwiek kontrolki z nim związane i być kompatybilny ze wszystkimi "nowoczesnymi" przeglądarkami lub mieć opcję polyfill.

Poprzednio robiłbym to przez Flash i FLVPlayback, ale wolałbym omijać Flash w sferze HTML5. Myślę, że mógłbym użyć javascriptowej wersji setTimeout, aby stworzyć gładką pętlę, ale co powinienem użyć do osadzenia samego filmu? Czy jest coś, co będzie transmitować wideo w taki sposób, jak to robiłby FLVPlayback?

Answer 1

pętla atrybut powinien to zrobić:

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

Jeżeli masz problem z atrybutu pętli (jak mieliśmy w przeszłości), słuchać przypadku videoEnd i wywołać metodę play() kiedy go pożary.

Uwaga1: Nie jestem pewien co do zachowania na iPadzie/iPhonie firmy Apple, ponieważ mają pewne ograniczenia przeciwko autoplay.

Uwaga2: loop="true" i autoplay="autoplay" są przestarzałe

Answer 2

Można to dwa następujące sposoby zrobić:

1) Korzystanie loop atrybut w elemencie wideo (wspomniane w pierwszej odpowiedzi):

2) i można użyć zdarzenia multimedialnego ended:

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

    newVideo.play(); 

});