html5 video under image

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指針事件：無屬性，這隻適用於Firefox和Safari瀏覽器。我知道我可以製作自己的視頻控制按鈕，並將它們放置在具有更高Z-index的圖像上方，但我更願意使用瀏覽器原生視頻控制。有一個更好的方法嗎？

Answer 1

Support for the CSS3 pointer-events property很不完整。

達到你想要什麼，而不必重新實現播放器的控制，我認爲你有兩個選擇：

1. 看一看一些可用HTML5視頻庫。我確定其中的一個可以讓您將控件設置爲您所需的級別。

2. 將你的面具圖像分解成頂部，右側，底部和左側切片，並使用它們來構圖元素，必要時覆蓋它。只要沒有框架元件覆蓋視頻控件，你應該沒問題

Answer 2

不幸的是，你唯一的選擇（除了分手圖像，以便不妨礙）是讓你自己的控件和地點他們在透明圖像上。

<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-index比你透明的形象，使他們當你mouseout消失（或使用腳本，使它們消失，你mousemove以外的某些x/y邊界）等