我們可以在HTML5視頻之上堆疊元素嗎？

Question

我要的是例如：

<video> = z-index: -1; 
<div id="post"> = z-index: 0; 

我已經試過這在一定程度上......但如果有人有一些關於它的具體信息，這將是很好的瞭解。我是H5 Video的新手，我知道使用閃光燈有可能，但不適用於移動設備（我不關心atm，可以有一些糟糕的後備）

感謝您提前提供任何信息。

Answer 1

我還沒有使用HTML5視頻，但我知道Vimeo HTML5播放器似乎完全按照您的要求進行操作。他們使用視頻上方的<div>甚至<canvas>來呈現播放控件，標題和其他按鈕。

Answer 2

您可以使用z-index將元素疊加在html5視頻之上，完全如您所述。你可以看到我的演示與此的jsfiddle，http://jsfiddle.net/cJJwj/3/

這裏就是我在小提琴使用的代碼：然而

HTML

<video width="200" height="200" 
    controls="controls" 
    src="http://upload.wikimedia.org/wikipedia/commons/4/43/Eisbach_surfen_v1.ogv"> 
</video> 
<p>paragraph</p> 

CSS

video { 
    position: relative; 
    z-index: 0; 
} 
p { 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    color: red; 
    font-size: 2em; 
    border: medium solid yellow; 
    z-index: 1; 
} 

我應該提到， ，我試圖使用z-index: -1;作爲視頻，並且視頻控件無法工作（在Firefox 5 beta和Chrome中），但是當我使用z-index: 0時廣告，控件工作正常。我不知道爲什麼這樣。