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实现画半圆弧线的示例代码
Nov 06 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 HTML / CSS
HTML中link标签属性的具体用法
May 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加密解密函数(动态加密)
2013/06/19 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
Web服务器框架 Tornado简介
2014/07/16 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
Python实现粒子群算法的示例
2021/02/14 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
简易离婚协议书范本
2014/10/24 职场文书
倡议书格式及范文
2015/04/29 职场文书
如何写观后感
2015/06/19 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python