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 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
newxtree.js代码
2007/03/13 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
BootStrap中
2016/12/10 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
python中迭代器(iterator)用法实例分析
2015/04/29 Python
详解Django中的过滤器
2015/07/16 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
python实现多线程网页下载器
2018/04/15 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
精彩的大学生自我评价
2013/11/17 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
先进班集体申报材料
2014/12/26 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
Python基础知识之变量的详解
2021/04/14 Python