html video 增加按钮,video标签实现自动播放

一、问题

　　 1.默认播放按键不好看

　　2.设置自定义封面图

　　以上这两点都想自定义

二、思路

　　 1.使用差异把录像标签盖住

　　2.div中显示自定义的海报图片与按钮

三、步骤分解

　　 1.海报图片作为差异的背景

　　注：无论是横图还是竖图，都希望按原比例显示在差异内

　　css:yourDiv{ background-color:黑色；身高：20em背景图像：url( ./images/timg。jpg’)；背景-大小：包含；背景-重复：不重复；背景-位置：中心；}html

　　div class=yourDiv/div效果

　　竖图：

　　横图：

　　2.插入自定义播放图标

　　钢性铸铁。yourDiv { background-color:黑色；身高：20em背景图像：url( ./images/timg。jpg’)；背景-大小：包含；背景-重复：不重复；背景-位置：中心；显示器：flex对齐-项目：居中；}.您的div img { width:20%；左边距：40%;}html

　　div class=yourDiv img src= ./images/play.png/div效果

　　3.把差异覆盖到录像标签上

　　钢性铸铁。yourDiv { background-color:黑色；身高：20em背景图像：url( ./images/timg。jpg’)；背景-大小：包含；背景-重复：不重复；背景-位置：中心；显示器：flex对齐-项目：居中；位置：绝对；top:0px；左：0px宽度：100%;}.您的div img { width:20%；左边距：40%;}.父亲{背景色：黑色；宽度：100%;身高：16em位置：相对；}htm5

　　div class= father video id= video controls= controls autoplay= autoplay style= width:100%；高度：16em source src= ./视频/v1。MP4 type= video/ogg /source src= ./视频/v1。 MP4 type= video/MP4 //video div class= your div img src= ./images/play.png /div /div4 .触发播放方法

　　超文本标记语言

　　div class= father video id= video controls= controls autoplay= autoplay style= width:100%；高度：16em source src= ./视频/v1。MP4 type= video/ogg /source src= ./视频/v1。 MP4 type= video/MP4 //video div id= poster class= your div onclick= play() img src= ./images/play.png /div /divjs

　　var视频=文档。getelementbyid( video )；函数play(){ document。getelementbyid( poster )。风格。display= none视频。play()；}

　　这样就达到了之前的目的

　　总结：关键的还是：背景-位置：中心；

　　以上所述是小编给大家介绍的html5自定义录像标签的海报与播放按钮功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

　　如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。