0

ビデオが透けて見えるように透明な部分がある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のpointer-events：noneプロパティを見てきましたが、これはFirefoxとSafariブラウザでのみ機能します。独自のビデオコントロールボタンを作成して、より高いz-indexで画像の上に配置できることは知っていますが、ブラウザーのネイティブビデオコントロールを使用したいと思います。これを行うためのより良い方法はありますか？

4

2 に答える 2

2

CSS3のpointer-eventsプロパティのサポートはかなりパッチがあります。

プレーヤーコントロールを再実装せずに目的を達成するには、2つのオプションがあると思います。

  1. 利用可能なHTML5ビデオライブラリのいくつかを見てください。これらのいずれかを使用すると、必要なレベルにコントロールのスタイルを設定できると確信しています。

  2. マスク画像を上、右、下、左のスライスに分割し、これらを使用して要素をフレーム化し、必要に応じてオーバーレイします。フレーム要素がビデオコントロールに重なっていない限り、問題はありません。

于 2012-05-08T13:02:01.323 に答える
1

残念ながら、（邪魔にならないように画像を分割する以外の）唯一のオプションは、独自のコントロールを作成し、透明な画像の上に配置することです。

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

どこ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"; 
    }
}

ボタンは好きなようにスタイルを設定できます。たとえば、動画の上に直接配置したり、透明な画像よりも高いzインデックスを付けたり、マウスアウトしたときにボタンが消えるようにしたり（または、特定のxの外側にマウスを移動するとボタンが消えるスクリプトを使用したりできます）。 / y境界）など。

于 2012-05-08T13:42:20.287 に答える