5

HTML の画像では、<map>タグを使用して、操作可能な画像内の領域を指定できます。<video>HTML5タグで使用できるこれに似たものはありますか?

4

1 に答える 1

8

<map><video>要素では機能しませんが、偽造することはできます。

1つの方法は、透明な画像を作成し、それをビデオの上に配置することです。1x1ピクセルの完全に透明なpngファイルを作成し、次のように設定します。

<div id="container" style="position: relative; width: 640px; height: 360px;">
    <video src="foo.webm" width="640" height="360" style="position: absolute;"></video>
    <img src="pixel.png" usemap="mymap" width="640" height="360" style="position: absolute;"/>
</div>

その間、ネットワークオーバーヘッドを節約し、そのpngをDataURIとしてロードすることもできます。かなり小さいはずです。

Popcorn.jsを使用して、ビデオのさまざまな時間にさまざまな画像マップを交換することもできます。

欠点の1つは、画像によってブロックされているため、ビデオをクリックする機能が失われることです。したがって、ネイティブコントロールを使用する場合は、高さを少し低く設定して、下部にスペースを確保してください。

于 2012-11-22T13:43:25.760 に答える