webentwicklung-frage-antwort-db.com.de

HTML5-Video wird nicht wiederholt

Ich habe ein Video als Hintergrund für eine Webseite und versuche, es in eine Endlosschleife zu bringen. Hier ist der Code:

<video autoplay='true' loop='true' muted='true'>
  <source src='/admin/wallpapers/linked/4ebc66e899727777b400003c' type='video/mp4'></source>
</video>

Obwohl ich dem Video gesagt habe, dass es eine Schleife sein soll, tut es dies nicht. Ich habe auch versucht, eine Schleife mit dem onended -Attribut zu erstellen (gemäß diesem Mozilla-Support-Thread , ich habe auch jQuery ausprobiert). Bisher hat nichts funktioniert. Ist es ein Problem mit Chrome oder meinem Code?

Bearbeiten:

Ich habe die Netzwerkereignisse und HEAD einer Arbeitskopie ( http://fhsclock-labs.heroku.com/no-violence ) im Vergleich zu der von mir verwendeten Anwendung überprüft Der Unterschied besteht darin, dass die Arbeitskopie das Video von einem statischen Asset auf Heroku (anscheinend über Varnish) bereitstellt, während meines von GridFS (MongoDB) bereitgestellt wird.

Auf der Registerkarte "Netzwerk" im Chrome-Inspektor wird angezeigt, dass in meiner Anwendung das Video dreimal angefordert wird. Einmal ist der Status "Ausstehend", das zweite Mal ist "Abgebrochen" und das letzte Mal ist 200 OK. In der Arbeitskopie werden nur zwei Anforderungen angezeigt, eine Statusanforderung steht aus und die andere Anforderung enthält 206 Teilinhalte. Nachdem das Video jedoch einmal abgespielt wurde, ändert sich diese Anforderung in "Abgebrochen" und es wird eine weitere Anforderung für dieses Video gesendet. In meiner Bewerbung passiert das nicht.

Was den Typ betrifft, so sind in meiner Anwendung zwei "undefiniert" und das andere "Video/MP4" (welches es sein soll). In der Arbeits-App lauten alle Anforderungen "video/mp4".

Außerdem bekomme ich Resource interpreted as Other but transferred with MIME type undefined. Warnungen in der Konsole.

Ich bin mir nicht ganz sicher, wo ich anfangen soll. Ich bin der Meinung, dass das Problem serverseitig ist, da das Bereitstellen der Datei als statische Assets problemlos funktioniert. Möglicherweise sendet der Server nicht den richtigen Inhaltstyp. Möglicherweise liegt ein Problem mit GridFS vor. Ich weiß nicht.

In jedem Fall ist die Quelle hier . Jeder mögliche Einblick, den Sie anbieten können, wird geschätzt.

66

Ah, ich bin gerade auf genau dieses Problem gestoßen.

Wie sich herausstellt, schleifen Sie (oder irgendeine Art von Suche in <video> elements on Chrome funktioniert nur, wenn die Videodatei von einem Server bereitgestellt wurde, der teilweise Inhaltsanfragen versteht. d.h. der Server muss Anforderungen, die einen "Range" -Header enthalten, mit einer Antwort von 206 "Partial Content" berücksichtigen. Dies ist auch dann der Fall, wenn das Video klein genug ist, um vollständig von Chrome gepuffert zu werden, und keine Server-Roundtrips mehr durchgeführt werden: Wenn Ihr Server die Bereichsanforderung von Chrome beim ersten Mal nicht beachtet, kann das Video nicht wiederholt oder gesucht werden .

Also ja, ein Problem mit GridFS, obwohl wohl Chrome sollte mehr verzeihen.

117
afri

Einfachste Problemumgehung:

$('video').on('ended', function () {
  this.load();
  this.play();
});

Das Ereignis 'ended' Wird ausgelöst, wenn das Video das Ende erreicht. video.load() setzt das Video an den Anfang zurück und video.play() startet die Wiedergabe sofort nach dem Laden.

Dies funktioniert gut mit Amazon S3, wo Sie nicht so viel Kontrolle über Serverantworten haben, und umgeht auch Firefox-Probleme, die damit zusammenhängen, dass video.currentTime Nicht einstellbar ist, wenn einem Video die Metadaten der Länge fehlen.

Ähnliches Javascript ohne jQuery:

document.getElementsByTagName('video')[0].onended = function () {
  this.load();
  this.play();
};
16
d2vid

Sieht so aus, als wäre es ein Problem in der Vergangenheit gewesen. Es gibt mindestens zwei geschlossene Fehler, aber beide geben an, dass es behoben wurde:

http://code.google.com/p/chromium/issues/detail?id=3968

http://code.google.com/p/chromium/issues/detail?id=18846

Da Chrome und Safari beide Webkit-basierte Browser verwenden, können Sie möglicherweise einige der folgenden Problemumgehungen verwenden: http://blog.millermedeiros.com/2011/03/html5- video-fragen-auf-dem-ipad-und-wie-sie-zu-lösen /

function restartVideo(){
vid.currentTime = 0.1; //setting to zero breaks iOS 3.2, the value won't update, values smaller than 0.1 was causing bug as well.
vid.play();
}

//loop video
vid.addEventListener('ended', restartVideo, false);
6
John

Nur für den Fall, dass Ihnen keine der obigen Antworten hilft, stellen Sie sicher, dass Ihr Inspektor nicht ausgeführt wird, wenn die Option Cache deaktivieren aktiviert ist. Da Chrome das Video aus dem Cache holt, funktioniert es im Grunde nur einmal. Dies wurde nur 20 Minuten lang getestet, bevor festgestellt wurde, dass dies die Ursache war. Als Referenz und damit weiß ich, dass ich nicht der einzige bin - Fehlerbericht von jemand anderem .

3
srussking

Meine Situation:

Ich habe genau das gleiche Problem, aber das Ändern des Headers der Antwortnachricht allein hat nicht geholfen. Keine Schleife, Wiedergabe oder Suche. Auch ein reiner Stopp funktioniert nicht, aber das könnte meine Konfiguration sein.

Antwort:

Laut einigen Sites (konnte sie nicht mehr finden) ist es auch möglich, die load () - Methode direkt nach dem Ende des Videos auszulösen, bevor die nächste gestartet werden soll. Das sollte die Quelle neu laden und ein wieder funktionierendes Video/Audio-Element verursachen.

@ john

Bitte beachten Sie, dass Ihre Antworten/Links normale Fehler sind und sich nicht auf dieses Problem konzentrieren. Die Verwendung eines Servers/Webservers ist die Ursache für dieses Problem. Während die Fehler, die diese Links beschreiben, von einer anderen Art sind. Das ist auch der Grund, warum die Antwort nicht funktioniert.

Ich hoffe es hilft, ich bin noch auf der Suche nach einer Lösung.

3
WhoKnows

es ist super lahm, aber Dropbox verwendet den richtigen Statuscode. Also in die Dropbox hochladen und das www durch dl ersetzen.

Mit einer Dropbox-URL kann das Video also problemlos abgespielt werden.

1
gabrielstuff