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教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
详解盒子端CSS动画性能提升
May 24 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算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
python 模拟登陆github的示例
2020/12/04 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
工作分析计划书
2014/04/30 职场文书
电教室标语
2014/06/20 职场文书
英语通知范文
2015/04/22 职场文书
单位实习介绍信
2015/05/05 职场文书
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python