javascript - 视频标签上的居中图像

Question

好吧，对于一个元素，我需要在运行时根据 UserAgent 在视频顶部呈现居中图像(播放按钮)。如果 userAgent 不是 Firefox，我想显示图像，因为 Firefox 在开始时有自己的 playEvent 和视频顶部的按钮。我之前的所有尝试都失败了。

我试过:

• 在video标签中添加z-index为10，视频z-index为1
• 在视频标签周围放置一个带有背景图片的 div

有没有其他方法可以做到这一点，请不要使用海报回复，因为我已经有我需要使用的海报。

-编辑-

代码:

<tr>
    <td runat="server" width="680px" height="383px" id="vContainer">
        <video id="player" style="z-index: 1" width="100%" height="100%" title="" controls runat="server">
            <source runat="server" id="ffVideo" type="video/ogg" />
            <source runat="server" id="mp4Video" type="video/mp4" />
        </video>
        <embed id="playerOld" width="680px" autostart="false" allowfullscreen="true" height="383px" title="" style="display: none" type="application/mp4" runat="server" />
    </td>
</tr>

Answer 1

就像放一个标签并给它更多的 z-index 一样简单。你可以让它运行:http://jsfiddle.net/65rda3jq/

<div class="cont">
    <div class="img"></div>
     <video id="player" style="z-index: 1" width="100%" height="100%" title="" controls
        runat="server">
        <source runat="server" id="ffVideo" type="video/ogg" />
        <source runat="server" id="mp4Video" type="video/mp4" />
      </video>
      <embed id="playerOld" width="680px" autostart="false" allowfullscreen="true" height="383px"
        title="" style="display: none" type="application/mp4" runat="server" />
</div>

CSS

.cont {
    position:relative;
}

video { position: relative; }
.img {z-index:10; background: #f00; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; }