小编给大家分享一下如何通过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

<divclass="yourDiv"></div>

效果


竖图：


横图：

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;}.yourDivimg{width:20%;margin-left:40%;}

html：

<divclass="yourDiv"><imgsrc="./images/play.png"></div>

效果


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%;}.yourDivimg{width:20%;margin-left:40%;}.father{background-color:black;width:100%;height:16em;position:relative;}

htm5：

<divclass="father"><videoid="video"controls="controls"autoplay="autoplay"><sourcesrc="./videos/v1.mp4"type="video/ogg"/><sourcesrc="./videos/v1.mp4"type="video/mp4"/></video><divclass="yourDiv"><imgsrc="./images/play.png"></div></div>

4.触发播放方法

html：

<divclass="father"><videoid="video"controls="controls"autoplay="autoplay"><sourcesrc="./videos/v1.mp4"type="video/ogg"/><sourcesrc="./videos/v1.mp4"type="video/mp4"/></video><divid="poster"class="yourDiv"onclick="play()"><imgsrc="./images/play.png"></div></div>

js：

varvideo=document.getElementById("video");functionplay(){document.getElementById("poster").style.display="none";video.play();}

看完了这篇文章，相信你对“如何通过html5自定义video标签的海报与播放按钮功能”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！