如何通过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标签的海报与播放按钮功能"有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！