HTML5ビデオスプライト

現在、単一のキャンバスに複数の同期されたビデオソースを動的に合成する必要があるプロジェクトに取り組んでいます。私がまとめた最初のプロトタイプはビデオをHTMLVideoElementsにロードし、次にrequestAnimFrameを（Paul Irishのshimを介して）使用してこれらを単一のキャンバスに描画し、異なる要素間の同期を維持しました。

これは機能的であり、システムはかなり良好に同期を保持できます（許容誤差+/- 80ミリ秒）が、控えめに言ってもやや非効率的です。私は最適化について考えてきましたが、かなり簡単に思える1つのアプローチは、すべてのメディアを1つの大きな「ビデオスプライト」に組み合わせてこれを提供することです。これにより、それを単一のビデオ要素にロードして、クライアント側で関心領域を抽出してレンダリングし、drawImage()ソース間の同期を管理する必要をなくすことができます。

他の誰かが過去に似たようなものを実装しましたか？もしそうなら、どのアプローチがあなたのためにうまくいきましたか？

popcorn.jsをチェックアウトしましたか？

Popcorn.jsは、JavaScriptで記述されたHTML5メディアフレームワークであり、映画製作者、Web開発者、およびWeb上で時間ベースのインタラクティブメディアを作成したいすべての人向けです。Popcorn.jsは、MozillaのPopcornプロジェクトの一部です。

http://popcornjs.org/