html5画像の下に画像

Question

私はビデオが透けて見えるように透明な部分を持つpng画像の下にあるビデオを持っています。

<div id="Layer2" style="position:absolute; z-index:2; left: 0px; top: 0px; width: 960px; height: 640px; visibility: visible"> 
<div align="left"><img src="http://www.mysite.com/wp-content/uploads/picture.png" width="960" height="640" /></div> 
</div> 
<div id="Layer1" style="position:absolute; z-index:1; left: 251px; top: 91px; width: 640px; height: 360px; overflow: hidden; visibility: visible; "> 
<div align="left" >[FMP poster="http://www.mysite.com/wp-content/uploads/thumb.jpg" width="640" height="360"]http://www.mysite.com/wp-content/uploads/movie.webm[/FMP]</div> 
</div> 

ビデオをクリックできるようにして、人々がビデオコントロールにアクセスできるようにするにはどうすればよいですか？

私はCSSポインタイベント：noneプロパティを見てきましたが、これはFirefoxとSafariブラウザでのみ機能します。私は私自身のビデオコントロールボタンを作成して、より高いZインデックスを持つ画像の上に置くことができますが、私はブラウザのネイティブビデオコントロールを使用することを好むでしょう。これを行うより良い方法はありますか？

Answer 1

Support for the CSS3 pointer-events propertyはかなりかすかです。私は次の2つのオプションがあると思う再実装プレイヤーがコントロールしなくても、あなたが望むものを達成するために

：

1. は、利用可能なHTML5のビデオライブラリのいくつかを見てください。私はこれらのうちの1つがあなたが必要とするレベルにコントロールをスタイルすることを可能にすると確信しています。

2. マスクイメージを上、右、下、左のスライスに分割し、要素を枠に入れ、必要に応じてオーバーレイします。限りフレーム要素のどれもが、ビデオコントロールをオーバーレイしないよう、あなたは大丈夫でなければなりません

Answer 2

残念ながら、（わきそれが邪魔にならないように、イメージを壊すから）あなたの唯一のオプションは、独自のコントロールと場所を作ることですそれらを透明な画像上に表示する。 togglePlayがある

<video controls="false" id="myVid"> 
    ... 
</video> 
... 
<img src="play.png" id="playButton" onclick="togglePlay()" /> 

：

function togglePlay() { 
    var vid = document.getElementById("myVid"); 
    var button = document.getElementById("playButton"); 
    if(vid.paused) { 
     vid.play(); 
     playButton.src = "pause.png"; 
    } else { 
     vid.pause(); 
     playButton.src = "play.png"; 
    } 
} 

あなたが好きしかし、直接あなたのビデオの上に置き、例えば、ボタンのスタイルを、彼らにあなたの透明なイメージよりもhigerのZインデックスを与えることができ、それらを作りますあなたがマウスアウトしたときに消えてしまいます（または、あなたが特定のx/y範囲外にマウスを移動してしまうようなスクリプトを使用するなど）。