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

容器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>