HTML：

Question

对于一个项目来说，我需要有一个居中的图像（一个播放按钮），它在运行时在视频的顶部呈现，具体取决于UserAgent。如果userAgent不是Firefox，我想显示图像，因为Firefox在开始时在视频顶部有自己的playEvent和按钮。我之前尝试过的所有尝试都失败了。

我试过了：

标记，并将z-index置于10，同时将视频z-index置于1
在视频标记周围放置带背景图片的div

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

-EDIT-

代码：

<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; }

Answer 2

试试这个：

HTML：

<div class="cont">
    <div class="img"><span class='play_icon'></span></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;
    background:rgba(42,42,42,0.9);
    border:none;
    color:#fff;
    outline: none;
}
.play_icon{
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 36px solid #fc8b02;
    margin: auto;  
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
}

video { position: relative; }
.img {
  margin: auto;  
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 10%;
    height: 16%;
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0,0,0,0.6);
}

http://jsfiddle.net/Grald/kgwvupjm/

视频代码

2 个答案:

HTML：

CSS：