HTML5ビデオスプライト
現在、複数の同期されたビデオソースを単一のキャンバスに動的に合成する必要があるプロジェクトに取り組んでいます。私がまとめた最初のプロトタイプは、ビデオをHTMLVideoElementsにロードし、（ Paul Irishのshim を介して）requestAnimFrameを使用してこれらを単一のキャンバスに描画し、同期を維持しましたさまざまな要素。
これは機能的であり、システムはかなりよく同期を保つことができますが（+/- 80msの許容誤差）、控えめに言っても多少非効率的です。私は最適化について考えてきましたが、非常に簡単に思える1つのアプローチは、すべてのメディアを1つの大きな「ビデオスプライト」に組み合わせてこれを提供することです。これにより、単一のビデオ要素にロードして、drawImage()を使用してクライアント側の関心領域を抽出およびレンダリングし、ソース間の同期を管理する必要をなくすことができます。
他の誰かが過去に似たようなものを実装しましたか？もしそうなら、どのアプローチがあなたのためにうまくいきましたか？
Popcorn.jsをチェックアウトしましたか？
Popcorn.jsは、映画製作者、Web開発者、および時間ベースのインタラクティブメディアをWebで作成したい人のためにJavaScriptで記述されたHTML5メディアフレームワークです。 Popcorn.jsは、MozillaのPopcornプロジェクトの一部です。