我在video
标签内附加了一个div,并在CSS后面使用了它,但它不起作用。我已经添加了JavaScript,以在点击时播放/停止视频。我想在播放器中间显示一个按钮。像这样
#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;
}
我认为您不能/应该将内容放置在视频源以外的视频元素中,除非您希望将这些内容显示在不支持视频标签的浏览器中。摘自规格:
内容可以提供在video元素内部;它适用于不支持视频的较旧的Web浏览器,因此可以尝试使用旧版视频插件,或向这些较旧的浏览器的用户显示文本,以告知他们如何访问视频内容
http://dev.w3.org/html5/spec-author-view/video.html#video
但是,通过用容器包装video元素并将overlay-div附加到该容器,您可以通过position:absolute和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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句