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 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 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
深入array multisort排序原理的详解
2013/06/18 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php实现等比例压缩图片
2018/07/26 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
python unichr函数知识点总结
2020/12/16 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
database面试题
2013/03/28 面试题
市场开发与营销专业求职信
2013/12/31 职场文书
学生自我评价范文
2014/02/02 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
节能环保演讲稿
2014/08/28 职场文书
工作失职检讨书范文
2015/05/05 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
村官2015年度工作总结
2015/10/14 职场文书
导游词之潮音寺
2019/09/26 职场文书