wake-up-neo.com

Spielen Sie in HTML5 Videos in Endlosschleifen ab

Ich möchte ein Video in eine HTML5-Seite einfügen, die beim Laden der Seite wiedergegeben wird, und nach Abschluss ohne Unterbrechung zum Anfang zurückkehren. Das Video sollte auch NICHT mit Steuerelementen verknüpft sein und entweder mit allen "modernen" Browsern kompatibel sein oder die Option einer Polyfüllung haben.

Früher hätte ich das über Flash und FLVPlayback gemacht, aber ich würde es vorziehen, mich von Flash in der HTML5-Sphäre fernzuhalten. Ich denke, ich könnte Javascript's 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 wie FLVPlayback streamen würde?

html5videovideo-streaminghtml5-video
80
stefmikhail

Das loop 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 Schleifenattribut haben (wie in der Vergangenheit), hören Sie sich das Ereignis videoEnd an und rufen Sie die Methode play() auf, wenn es ausgelöst wird.

Hinweis 1: Ich bin mir über das Verhalten auf dem iPad/iPhone von Apple nicht sicher, da es einige Einschränkungen für autoplay gibt.

Hinweis 2: loop="true" Und autoplay="autoplay" Sind veraltet

135
longilong

Ab April 2018 ist Chrome (zusammen mit mehreren anderen wichtigen Browsern) jetzt erforderlich auch das Attribut muted.

Deshalb solltest du verwenden

<video width="320" height="240" autoplay loop muted>
  <source src="movie.mp4" type="video/mp4" />
</video>
19
micah5

Für das iPhone funktioniert es, wenn Sie auch playsinline so hinzufügen:

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>
3
Raluca Albu

Sie können dies auf zwei Arten tun:

1) Verwenden des Attributs loop im Videoelement (in der ersten Antwort erwähnt):

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

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

    newVideo.play();

});
1
asmmahmud