Question

我想要的是例如：

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

我在某种程度上试过了......但是如果有人掌握一些具体信息会很好。我是H5 Video的新用户，我知道Flash有可能，但不适用于移动设备（我不关心atm，可能会有一些糟糕的后备）

提前感谢您的任何信息。

Answer 1

您可以使用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时，控制工作正常。我不知道为什么会这样。

Answer 2

我也没有使用HTML5视频，但我知道Vimeo HTML5播放器似乎完全符合您的要求。他们在视频上方使用<div>甚至<canvas>来呈现播放控件，标题和其他按钮。

我们可以在HTML5视频上堆叠元素吗？

2 个答案: