html中如何在图片上叠加一个视频进行播放

Question

问题是这样的：html中我有一张图片记做A.png，想把一个视频播放的按钮Button.png放在该图片中央，点击按钮，视频会将原图片A.png中覆盖掉并播放，播放完后，视频移出图片。诸位朋友们能指导一下吗？十分感谢

Answer 1

容器relative定位，放入图片，button absolute定位，视频容器也absolute定位就行了，视频容器z-index大于button的，这样播放视频时就会遮盖住button了，停止视频时清空视频容器的innerHTML就显示button，布局如下

 <style>
#container,#container img,#video{position:relative}
#container,#container img,#video{width:500px;height:500px;display:block;}
#video,#container img.btn{position:absolute;left:0px;top:0px}
#video{z-index:100}
#container img.btn{left:50%;top:50%;width:50px;height:50px;margin-left:-25px;margin-top:-25px}/*注意修正谋面的4个参数值，居中用的*/
</style>
<div id="container">
<img src="a.png" />
<img src="button.png" class="btn" alt="play"/>
<div id="video"></div>
</div>