Endlos looping video on-load in HTML5 abspielen

Question

Ich möchte ein Video in eine HTML5-Seite einfügen, die beim Laden der Seite abgespielt wird, und nach Abschluss des Vorgangs ohne Unterbrechung an den Anfang zurückkehren. Das Video sollte auch NICHT irgendwelche Kontrollen damit verbunden haben, und entweder mit allen 'modernen' Browsern kompatibel sein, oder die Option eines Polyfill haben.

Zuvor hätte ich dies über Flash und FLVPlayback getan, aber ich würde es vorziehen, Flash in der HTML5-Sphäre zu vermeiden. Ich denke, ich könnte Javascript setTimeout verwenden, um eine glatte Schleife zu erstellen, aber was soll ich verwenden, um das Video selbst einzubetten? Gibt es da draußen etwas, das das Video so streamen wird, wie es FLVPlayback würde?

Answer 1

Die Schleife Attribut sollte es tun:

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

Sollten Sie ein Problem mit dem Loop-Attribut haben (wie wir in der Vergangenheit hatten), hört es, wenn die play() Methode zum videoEnd Ereignis und rufen Feuer.

Anmerkung1: Ich bin mir nicht sicher über das Verhalten auf dem Apple iPad/iPhone, weil sie einige Einschränkungen gegen autoplay haben.

Hinweis 2: loop="true" und autoplay="autoplay" sind

veraltet

Answer 2

du die folgenden zwei Arten tun:

1) Unter Verwendung loop Attribut in Video-Elemente (in der ersten Antwort erwähnt):

2) und Sie können das ended Medienereignis verwenden:

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

    newVideo.play(); 

});