Ich arbeite derzeit an einem Projekt, bei dem mehrere synchronisierte Videoquellen dynamisch auf einer einzigen Leinwand zusammengesetzt werden müssen. Der erste Prototyp, den ich zusammengestellt habe, hat das Video in HTMLVideoElements geladen und dann requestAnimFrame (über Paul Irishs Shim ) verwendet, um diese auf eine einzelne Leinwand zu zeichnen und die Synchronisation zwischen den verschiedenen Elementen aufrechtzuerhalten.
Obwohl dies funktionsfähig ist und das System die Synchronisation ziemlich gut halten kann (+/- 80 ms Toleranz), ist es gelinde gesagt etwas ineffizient. Ich habe über Optimierungen nachgedacht und ein Ansatz, der ziemlich einfach zu sein scheint, besteht darin, alle Medien in einem einzigen größeren "Video-Sprite" zu kombinieren und diesem zu dienen. Dies würde es ermöglichen, es in ein einzelnes Videoelement zu laden, das dann verwendet werden könnte, um die Bereiche von Interesse clientseitig zu extrahieren und zu rendern drawImage(), wobei die Notwendigkeit der Verwaltung der Synchronisierung zwischen Quellen verwendet und beseitigt wird.
Hat jemand in der Vergangenheit etwas Ähnliches implementiert? Wenn ja, welcher Ansatz hat für Sie gut funktioniert?
quelle
Antworten:
Haben Sie popcorn.js ausgecheckt?
Popcorn.js ist ein in JavaScript geschriebenes HTML5-Medienframework für Filmemacher, Webentwickler und alle, die zeitbasierte interaktive Medien im Web erstellen möchten. Popcorn.js ist Teil von Mozillas Popcorn-Projekt.
http://popcornjs.org/
quelle