怎么在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/ceseop.html