HTML5ビデオ：ビデオの上に通常のHTMLコンテンツを置くことが可能

普通のHTMLコンテンツ（主にimgタグ）を（ビデオタグ経由で）ビデオの上に表示する方法を知っている人はいませんか？HTML5ビデオ：ビデオの上に通常のHTMLコンテンツを置くことが可能

2011-01-07 Jason Miesionczek

なぜポスターの属性を使用しないのですか？これにより、ビデオが読み込まれるか再生されるまで画像を表示できます。

2011-01-07 15:06:50

アイデアは、ビデオを部分的に下にあるように見せるために、ビデオの上部に沿った領域が重なるサイトのデザインの一部にビデオを統合しようとしています。私はビデオ自体の中にイメージを置こうとしましたが、圧縮のために、色とサイズがわずかに変化し、違いがかなり目立つようになりました。 –

この特定の例で私が考えることができる唯一の解決策は、div/imgをJavaScriptでビデオの上に自動的に配置することです。そうすれば、ビデオはページと共にロードされ、イメージに干渉しません。あなたはz-indexに注目したいかもしれません。 –

動画をその動画の背景として設定できますか？あなたのレイアウトでうまくいくかどうか確かではありませんが、論理的に見えます...

出典

2011-01-07 15:50:32 zenbike

ビデオを背景としてどのように設定しますか？ –

HTML5ビデオの上にhtml要素を置くことができます。 video要素とHTML要素の両方に「position：absolute」を指定し、HTML要素をビデオ要素よりも高いz-indexにします。

出典

2011-02-23 08:45:31 jj1910

この作業の例がありますか？ –

ここに例があります。しかし、次回は自分でやろうとするべきです。私に5分かかる;）：http://jsfiddle.net/GxvyG/ –

他の人が暗示しているように、絶対配置を使用してVIDEO要素の上にHTML要素を配置するのは非常に簡単です。難しいのは、iPhone、iPod、おそらく、薄いネイティブ再生クライアントとは対照的に、ページ上でインラインでビデオアセットを再生しない古いAndroidの携帯電話でイベントをキャプチャしようとするときです。これらのインスタンスの場合、VIDEO要素貪欲にイベントをキャプチャします。

あなたは「ポスター」または「サムネイル」として使用したい画像にそのbackground-imageセットでIMAGE要素またはDIVを使用する場合は、ユーザーがにビデオを得るためにそれらをタップすることができません再生を開始する - モバイルブラウザはこの動作を、その領域にあるVIDEO要素が存在するかのように扱います（「大きな再生」ボタンがどこにあるのかをクリックすると良いですが、ない途中でカスタムコントロール。

私が過去に使用したソリューションは、ちょうどあなたが正常にVIDEO要素を入れて、をシフトするページ上IMGまたはDIVポスターを置くことです3210要素オフスクリーン（絶対にleftスタイルが-3000pxに設定されているため）、これらのイベントを保存することはできません。

私はこれが正確に尋ねられたものではないことを知っていますが、うまくいけば、この情報は誰かにとって有用であることがわかります。

出典

2012-07-11 17:48:01 natlee75

+1あなたの方法に同意します。ユーザーアクション、つまりボタンをクリックする必要のある第三者のライブラリを実装する必要がありました。 Quicktimeプレーヤーは悪夢だった。私は最初、display：noneにビデオ要素を設定し、ユーザーの操作の後でそれを示しました。あなたはどこのフルスクリーンでも開くことができるように、ビデオ要素がどこにあるかは実際問題ではありません。 CSSを少しオフにすると、ユーザーをだますことができます – sidarcy

http://stackoverflow.com/questions/3683211/ipad-safari-mobile-seems-to-ignore-z-indexing-position-for-html5-video-elements – RobW

HTML5ビデオ：ビデオの上に通常のHTMLコンテンツを置くことが可能

答えて

関連する問題