开发者社区> 问答> 正文

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

小旋风柴进 2016-03-12 13:31:52 3306

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

分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:00:41

    容器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>
    0 0
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章