Html5ビデオオーバーレイアーキテクチャー

Question

ビデオと画像オーバーレイを持つhtml5ページを作成します。これはビデオ上に表示されている画像を意味します。このオーバーレイは時には場合によってはテキストになります。これを達成する良い方法はありますか？

私がこれまでに試したことは、ビデオを保持するために<video>タグを使用し、ビデオの上に置くキャンバスに画像を描画することです。これを表示するには、ビデオをZインデックスを-1に戻して移動する必要がありますが、ビデオコントロールは機能しません。たぶん、コントロールを再び働かせるための解決策があるかもしれませんが、私がここの正しい道にいるかどうかはわかりません。私はそこに推奨される解決策があると仮定しています。たぶん私はビデオとオーバーレイの両方を埋めるキャンバスを使用します。それとも全く違う何か？

注：：ここで重要だった点については、最初は誤った方向を指していたので、質問を編集しました。私はこれをフルスクリーンとすべてでシームレスに行うソリューションを得たいと考えていますが、焦点は：ビデオの上にアイテムを配置する適切な方法は何ですか - html5？

Answer 1

あなたが望むものを実現し、すぐに使用できるフルスクリーンでサポートされることには問題があります。 html5ビデオでのフルスクリーンサポートはオプションで、API（See discussion here）にはアクセスできない方法はありません。 組み込みのフルスクリーンを使用したとしても、実行時にサーバー上のビデオファイル自体を変更しない限り、その上にコンテンツを挿入する方法はありません。

あなたは何ができるのですか（私が似たような場合に行ったこと）は、独自のビデオコントロールを実装し、内蔵のコントロールなしでビデオタグを実行し、必要なだけ多くのレイヤーをオーバーレイするのが楽しいですあなたの今のフォーカスビデオのうち。動画の上にキャンバスを配置することにより、あなたが抱えている問題は、HTMLで構築ブロックしている：

フルスクリーンとして、あなたはhere

編集を行われているものとフルスクリーンと同様のカスタム背景のいくつかの並べ替えを実装することができますビデオコントロール。私の提案は、ビデオAPIを呼び出すhtmlとjavascriptを使用して、独自のビデオコントロール（再生、一時停止、ボリューム、シーカーなど）を実装することです。あなたはおそらくそれをより美しくし、次に醜いコントロールを組み込むことができます。 コントロールはオーバーレイされたキャンバスの上のレイヤーに含めることができ、その上にオーバーレイとその上にコントロールが設定されたビデオが表示されます。

あなた自身のコントロールの実装について少し読むことができますhereまたはhere そしてこれはこれよりもずっと簡単です。