开发者社区> 问答> 正文

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

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

展开
收起
小旋风柴进 2016-03-12 13:31:52 7074 0
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>
    2019-07-17 19:00:41
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载