HTML5-Video wird nicht wiederholt

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

 

Obwohl ich dem Video gesagt habe, es zu loopen, tut es das nicht. Ich habe auch versucht, es mit dem onended Attribut zu onended (wie in diesem Mozilla-Support-Thread , habe ich auch dieses Bit von jQuery ausprobiert). Nichts hat bisher funktioniert. Ist es ein Problem mit Chrome oder meinem Code?

Bearbeiten:

Ich überprüfte die Netzwerkereignisse und HEAD einer Arbeitskopie ( http://fhsclock-labs.heroku.com/no-violence ) gegen die Anwendung, die ich versuche zu arbeiten. Der Unterschied besteht darin, dass die Arbeitskopie das Video von einem statischen Asset auf Heroku (über Varnish, anscheinend) anbietet, während meinerseits von GridFS (MongoDB) aus bedient wird.

Der Tab “Netzwerk” in Chrome Inspector zeigt, dass das Video in meiner Anwendung dreimal angefordert wird. Einmal ist der Status “anstehend”, der zweite ist “abgebrochen” und der letzte ist 200 OK. Die Arbeitskopie zeigt nur zwei Anfragen an, der Status ist ausstehend und der andere ist 206 Teilinhalt. Nachdem das Video jedoch einmal abgespielt wurde, ändert sich die Anforderung in “Abgebrochen” und eine weitere Anforderung für dieses Video wird ausgeführt. In meiner Anwendung passiert das nicht.

Wie für Typ, in meiner Anwendung sind zwei “undefiniert” und die andere “video / mp4” (was es sein soll). In der Arbeits-App sind alle Anfragen “video / mp4”.

Darüber hinaus erhalte ich Resource interpreted as Other but transferred with MIME type undefined. Warnungen in der Konsole.

Ich bin mir nicht ganz sicher, wo ich damit anfangen soll. Es ist meine Überzeugung, dass das Problem serverseitig ist, da die Datei als statische Assets funktioniert. Es kann sein, dass der Server den richtigen Inhaltstyp nicht sendet. Es könnte ein Problem mit GridFS sein. Ich weiß es nicht.

Auf jeden Fall ist die Quelle hier . Jeder Einblick, den Sie anbieten können, wird geschätzt.

   

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

Wie sich herausstellt, funktioniert das Schleifen (oder jede Art von Suche) in -Elementen in Chrome nur, wenn die Videodatei von einem Server bereitgestellt wurde, der partielle Inhaltsanforderungen versteht. dh der Server muss Anforderungen, die einen “Range” -Header mit einer 206 “Partial Content” -Antwort enthalten, 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-Round-Trips mehr unternommen werden: Wenn Ihr Server die Range-Anforderung von Chrome zum ersten Mal nicht berücksichtigt hat, ist das Video nicht wiederholbar oder suchbar .

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

Einfachste Problemumgehung:

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

Das Ereignis 'ended' wird video.load() wenn das Video das Ende erreicht, video.load() setzt das Video an den Anfang zurück und video.play() startet es sofort nach dem Laden.

Dies funktioniert gut mit Amazon S3, wo Sie nicht so viel Kontrolle über die Serverantworten haben und auch Firefox-Probleme im Zusammenhang mit video.currentTime , wenn ein Video seine Längen-Metadaten nicht enthält.

Ähnliches Javascript ohne jQuery:

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

Es sieht so aus, als wäre es ein Problem in der Vergangenheit, es gibt mindestens zwei geschlossene Bugs, aber beide behaupten, dass es behoben wurde:

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

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

Da Chrome und Safari beide Webkit-basierte Browser verwenden, können Sie einige dieser Arbeitsumgebungen verwenden: http://blog.millermedeiros.com/2011/03/html5-video-issues-on-the-ipad-and-how -lösen-sie /

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

Meine Situation:

Ich habe genau das gleiche Problem, aber das Ändern der Kopfzeile der Antwortnachricht allein hat nicht getan. Keine Schleife, Wiederholung oder Suche. Auch ein reiner Stop funktioniert nicht, aber das könnte meine Konfiguration sein.

Antworten:

Nach einigen Seiten (könnte nicht mehr gefunden werden) ist es auch möglich, die load () -Methode direkt nach dem Ende des Videos auszulösen, bevor das nächste gestartet werden soll. Das sollte die Quelle neu laden, was ein erneut funktionierendes Video / Audio-Element verursacht.

@John

Bitte beachten Sie, dass Ihre Antworten / Links normale Fehler sind und sich nicht auf dieses Problem konzentrieren. Die Verwendung eines Servers / Webservers verursacht dieses Problem. Die Fehler, die diese Links beschreiben, sind von anderer Art. Das ist auch der Grund, warum die Antwort nicht funktioniert.

Ich hoffe es hilft, ich suche immer noch nach einer Lösung.

Falls keine der obigen Antworten Ihnen helfen sollte, stellen Sie sicher, dass Ihr Inspektor nicht mit der Option “Cache deaktivieren” aktiviert ist. Da Chrome das Video aus dem Cache extrahiert, funktioniert es im Prinzip nur einmal. Nur debuggte es für 20 Minuten, bevor er erkannte, dass dies die Ursache war. Als Referenz und so weiß ich, dass ich nicht der einzige Chrom-Bug eines anderen bin.

es ist super lahm, aber Dropbox verwendet den richtigen Statuscode. Also auf Dropbox hochladen und das www per dl ersetzen.

Mit einer Dropbox-URL spielt das Video also gut.

Ich weiß, dass dies nicht genau auf die gestellte Frage zutrifft, aber wenn jemand bei einem ähnlichen Problem darauf stößt, stellen Sie sicher, dass Sie Ihre Quellen ordnungsgemäß haben.

Ich habe eine webm und eine webm Datei webm und festgestellt, dass das Video nicht in Chrome webm wurde. Das lag daran, dass die webm Datei als erste source aufgelistet war, sodass Chrome die webm Datei und nicht die webm Datei webm .

Ich hoffe, dass das einem anderen hilft, der auf dieses Problem stößt.