html5自定义video标签的海报与播放按钮功能


Posted in HTML / CSS onDecember 04, 2019

一、问题

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

<div class="yourDiv"></div>

效果

html5自定义video标签的海报与播放按钮功能

竖图:

html5自定义video标签的海报与播放按钮功能

横图:

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

<div class="yourDiv">
 <img src="./images/play.png">
</div>

效果

html5自定义video标签的海报与播放按钮功能

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

<div class="father">
  <video id="video" controls="controls" autoplay="autoplay" style="width:100%;height:16em">
   <source src="./videos/v1.mp4" type="video/ogg" />
   <source src="./videos/v1.mp4" type="video/mp4" />
  </video>

  <div class="yourDiv">
   <img src="./images/play.png">
  </div>
 </div>

4.触发播放方法

html

<div class="father">
  <video id="video" controls="controls" autoplay="autoplay" style="width:100%;height:16em">
   <source src="./videos/v1.mp4" type="video/ogg" />
   <source src="./videos/v1.mp4" type="video/mp4" />
  </video>

  <div id="poster" class="yourDiv" onclick="play()">
   <img src="./images/play.png">
  </div>
 </div>

js

var video = document.getElementById("video");

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

html5自定义video标签的海报与播放按钮功能

这样就达到了之前的目的

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

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

HTML / CSS 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 #HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 #HTML / CSS
web字体加载方案优化小结
Nov 29 #HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 #HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 #HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 #HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 #HTML / CSS
You might like
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
微信小程序一周时间表功能实现
2019/10/17 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
python实现百度关键词排名查询
2014/03/30 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
优秀辅导员事迹材料
2014/02/16 职场文书
2015年党性分析材料
2014/12/19 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript