您现在的位置是：网站首页> 编程资料编程资料

html5自定义video标签的海报与播放按钮功能html5移动端自适应布局的实现吃透移动端 Html5 响应式布局HTML5 通过Vedio标签实现视频循环播放的示例代码HTML5中在title标题标签里设置小图标的方法html5用video标签流式加载的实现详解HTML5 Canvas标签及基本使用详解HTML5布局和HTML5标签

2021-08-30 1139人已围观

简介 这篇文章主要介绍了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(); }

在这里插入图片描述

这样就达到了之前的目的

总结：关键的还是 ：background-position: center;

以上所述是小编给大家介绍的html5自定义video标签的海报与播放按钮功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

上一篇：HTML5 3D旋转相册的实现示例微信小程序之html5 canvas绘图并保存到系统相册HTML5+css3：3D旋转木马效果相册HTML5 Plus 实现手机APP拍照或相册选择图片上传功能HTML5 CSS3打造相册效果附源码下载

下一篇：Html5写一个简单的俄罗斯方块小游戏

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网