怎么在html5中自定义video标签实现海报与播放按钮功能
怎么在html5中自定义video标签实现海报与播放按钮功能?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、网站建设、外贸网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的柳林网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
一、问题
1.默认播放按键不好看
2.设置自定义封面图
以上这两点都想自定义
二、思路
1.使用div把video标签盖住
2.div中显示自定义的海报图片与按钮
三、步骤分解
1.海报图片作为div的背景
注:无论是横图还是竖图,都希望按原比例显示在div内
css:
.yourDiv{ background-color: black; height:20em; background-image: url('./images/timg.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center; }
html
2.插入自定义播放图标
css
.yourDiv { background-color: black; height:20em; background-image: url('./images/timg.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center; display:flex; align-items: center; } .yourDiv img { width:20%; margin-left: 40%; }
html
3.把div覆盖到video标签上
css
.yourDiv { background-color: black; height:20em; background-image: url('./images/timg.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center; display:flex; align-items: center; position: absolute; top: 0px; left: 0px; width: 100%; } .yourDiv img { width:20%; margin-left: 40%; } .father { background-color: black; width:100%; height:16em; position: relative; }
htm5
4.触发播放方法
html
js
var video = document.getElementById("video"); function play(){ document.getElementById("poster").style.display = "none"; video.play(); }
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
网站栏目:怎么在html5中自定义video标签实现海报与播放按钮功能
路径分享:http://ybzwz.com/article/ggjpgp.html