如何在视频标签中添加按钮overLay

Question

我在 video 标签中附加了一个 div 并在 CSS 之后使用，但它不起作用。我已经在点击时将 javascript 合并到 play/stop 视频。我想在播放器中间显示一个按钮。类似于 this

#player_buttons
{
    width: 128px;
    height: 128px;
    z-index: 99;
    background: url('http://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat;
}

Answer 1

我认为您 can/should 不会将内容放在视频源以外的视频元素中，除非您希望该内容显示在不支持视频标签的浏览器中。摘自规格：

Content may be provided inside the video element; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents

http://dev.w3.org/html5/spec-author-view/video.html#video

但是通过用容器包装视频元素并将覆盖层-div附加到该容器，您可以通过 position:absolute 和 [=27 堆叠它们=]z-index.

您可以在此处查看示例：http://jsfiddle.net/vtrzmf92/

已更新HTML：

<div class="container">
    <video src="#" width="800" height="600"></video>
    <div class="player-buttons"></div>
</div>

已更新CSS：

.container{
    position: relative;
}

.container>.player-buttons{
    background: url('http://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat;
    height: 128px;
    left: 50%;
    margin: -64px 0 0 -64px;
    position: absolute;
    top: 50%;
    width: 128px;
    z-index: 1; 
}

如何在视频标签中添加按钮overLay

How to add button overLay in Video Tag

html

javascript

css

jquery

html5-video