Spielen Sie Videos mit Endlosschleifen beim Laden in HTML5 ab

89

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

Früher hätte ich dies über Flashund getan FLVPlayback, aber ich würde es vorziehen, mich Flashin der HTML5-Sphäre fernzuhalten. Ich denke, ich könnte Javascript verwenden setTimeout, 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 FLVPlaybackwürde, wie es wäre?

html video video-streaming html5-video stefmikhail
quelle

Antworten:

150

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

Wenn Sie ein Problem mit dem Schleifenattribut haben (wie in der Vergangenheit), hören Sie sich das videoEndEreignis an und rufen Sie das aufplay() Methode auf, wenn es ausgelöst wird.

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

Anmerkung 2: loop="true"und autoplay="autoplay"sind veraltet

Longi
quelle
1
In der Tat ein guter Rat, Sir. Am Ende habe ich javascriptdas videoEndEreignis abgehört und bin zum Anfang zurückgekehrt, da das loopAttribut nicht von allen Browsern unterstützt wird. Für iOS-Geräte unterstützen sie autoplayin keiner Weise Form oder Gestalt von iOS 5, daher habe ich nur ein Fallback-Image für Mobilgeräte verwendet. Danke noch einmal.
Stefmikhail
10
Die Verwendung von <video loop = "true"> ist ungültig. w3.org/TR/html-markup/video.html - entweder <video loop = "loop"> oder nur <video loop> - diese Regel gilt für fast ALLE HTML5-Tags (entweder nur tagname oder tagname = "tagname" für XHTML5)
@ vaxquis danke für das Update, du kannst die API-Änderungen beim nächsten Mal gerne bearbeiten!
Longi
5
Kein Problem, Kumpel, immer gerne helfen. Trotzdem würde ich XHTML-Attribute 'autoplay = "autoplay"' nicht mit HTML-Typ 'loop' mischen - ich würde entweder <video ... autoplay loop> verwenden, parsable als HTML5 oder <video .. autoplay = "autoplay" loop = "loop">, analysierbar als HTML5 oder XHTML5. Durch das Mischen von Stilen wird ein Markup erstellt, das als XHTML immer noch ungültig, für HTML jedoch unnötig ausführlich ist.
1
Im Allgemeinen autoplayfunktioniert in Safari nur, wenn Sie auch verwenden muted: webkit.org/blog/7734/auto-play-policy-changes-for-macos
andreyrd
34

Ab April 2018 benötigt Chrome (zusammen mit mehreren anderen wichtigen Browsern) nun auch das mutedAttribut.

Daher sollten Sie verwenden

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

Für das iPhone funktioniert es, wenn Sie auch playinline hinzufügen, also:

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>
Raluca Albu
quelle
Requisiten für JSX:autoPlay loop muted playsInline
Pomber
2

Sie können dies auf zwei Arten tun:

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

2) und Sie können das endedMedienereignis verwenden:

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

    newVideo.play();

});
asmmahmud
quelle