Ich habe ein Video als Hintergrund für eine Webseite und versuche, es in eine Schleife 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 das Video angewiesen habe, eine Schleife zu erstellen, ist dies nicht der Fall. Ich habe auch versucht, eine Schleife mit dem onended
Attribut zu erstellen (gemäß diesem Mozilla-Support-Thread habe ich auch dieses bisschen jQuery ausprobiert). Bisher hat nichts funktioniert. Ist es ein Problem mit Chrome oder meinem Code?
Bearbeiten:
Ich habe die Netzwerkereignisse und den KOPF einer Arbeitskopie ( http://fhsclock-labs.heroku.com/no-violence ) im Vergleich zu der Anwendung überprüft, mit der ich arbeiten möchte . Der Unterschied besteht darin, dass die Arbeitskopie das Video von einem statischen Asset auf Heroku (anscheinend über Varnish) bereitstellt, während meine von GridFS (MongoDB) bereitgestellt wird.
Auf der Registerkarte "Netzwerk" des Chrome-Inspektors wird angezeigt, dass das Video in meiner Anwendung dreimal angefordert wird. Einmal ist der Status "ausstehend", der zweite ist "abgebrochen" und der letzte ist 200 OK. Die Arbeitskopie zeigt nur zwei Anfragen, der eine Status steht noch aus und der andere ist Teilinhalt. Nachdem das Video einmal abgespielt wurde, ändert sich diese Anforderung in "Abgebrochen" und es wird eine weitere Anforderung für dieses Video gestellt. In meiner Bewerbung passiert das nicht.
In meiner Anwendung sind zwei "undefiniert" und das andere "video / mp4" (was es sein soll). In der funktionierenden App sind alle Anfragen "video / mp4".
Außerdem 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. Ich bin der Meinung, dass das Problem serverseitig ist, da das Bereitstellen der Datei als statische Assets einwandfrei funktioniert. Möglicherweise sendet der Server nicht den richtigen Inhaltstyp. Dies könnte ein Problem mit GridFS sein. Ich weiß es nicht.
In jedem Fall ist die Quelle hier . Jeder Einblick, den Sie anbieten können, wird geschätzt.
quelle
curl -v -r0-1 ...
Einfachste Problemumgehung:
Das
'ended'
Ereignis wird ausgelöst, wenn das Video das Ende erreicht,video.load()
das Video auf den Anfang zurückgesetzt undvideo.play()
die Wiedergabe sofort nach dem Laden gestartet.Dies funktioniert gut mit Amazon S3, wo Sie nicht so viel Kontrolle über Serverantworten haben, und umgeht auch Firefox-Probleme, die damit zusammenhängen,
video.currentTime
dass ein Video nicht einstellbar ist, wenn seine Metadaten für die Länge fehlen.Ähnliches Javascript ohne jQuery:
quelle
Es sieht so aus, als wäre es in der Vergangenheit ein Problem gewesen. Es gibt mindestens zwei geschlossene Fehler, aber beide geben an, 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 sowohl Chrome als auch Safari Webkit-basierte Browser verwenden, können Sie möglicherweise einige dieser Problemumgehungen verwenden: http://blog.millermedeiros.com/2011/03/html5-video-issues-on-the-ipad-and-how -zu-lösen-sie /
quelle
Meine Situation:
Ich habe genau das gleiche Problem, aber das Ändern des Headers der Antwortnachricht allein hat nicht funktioniert. Keine Schleife, Wiederholung oder Suche. Auch ein reiner Stopp funktioniert nicht, aber das könnte meine Konfiguration sein.
Antworten:
Laut einigen Sites (konnte sie nicht mehr finden) ist es auch möglich, die load () -Methode direkt nach dem Ende des Videos und vor dem Start der nächsten auszulösen. 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 verursacht 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 suche noch nach einer Lösung.
quelle
Nur für den Fall, dass Ihnen keine der oben genannten Antworten hilft, stellen Sie sicher, dass Ihr Inspektor nicht mit aktivierter Option Cache deaktivieren ausgeführt wird. Da Chrome das Video aus dem Cache abruft, funktioniert es grundsätzlich einmal. Debuggen Sie dies nur 20 Minuten lang, bevor Sie feststellen, dass dies die Ursache ist. Als Referenz und so weiß ich, dass ich nicht der einzige Chrom-Bug-Bericht eines anderen bin .
quelle
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 einwandfrei abgespielt werden.
quelle
Ich hatte das gleiche Problem und löste das Problem unweigerlich durch Streaming des Inhalts.
Beispiel: Dies ist der Code mit PHP-Laravel-Blade-HTML-Code, der eine Streaming-Route anfordert:
Im Controller streame ich das Video und gebe es als Laravel-Stream-Funktion zurück:
und VideoStream Class ist die Streaming-Klasse, die ich aus einem GitHub- Gist gefunden habe :
quelle
Ich weiß, dass dies nicht genau die gestellte Frage betrifft, aber wenn jemand bei einem ähnlichen Problem darauf stößt, stellen Sie sicher, dass Ihre Quellen ordnungsgemäß in Ordnung sind.
Ich habe eine
mp4
und einewebm
Datei geladen und festgestellt, dass das Video in Chrome nicht geloopt wurde. Dies lag daran, dass diewebm
Datei als erstesource
aufgeführt war, sodass Chrome diewebm
Datei und nicht die Datei ludmp4
.Hoffe, das hilft jemand anderem, der auf dieses Problem stößt.
quelle