html网页制作教程按钮添加,网页制作html5自定义video标签的海报与播放按钮功能...
一、问题
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
效果
竖图:
横图:
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
效果
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
4.触发播放方法
html
js
var video = document.getElementById("video");
function play(){
document.getElementById("poster").style.display = "none";
video.play();
}
这样就达到了之前的目的
总结:关键的还是 :background-position: center;
以上所述是小编给大家介绍的html5自定义video标签的海报与播放按钮功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对米云问答网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
html网页制作教程按钮添加,网页制作html5自定义video标签的海报与播放按钮功能...相关推荐
- html video 修改封面,html5自定义video标签的海报与播放按钮功能
一.问题 1.默认播放按键不好看 2.设置自定义封面图 以上这两点都想自定义 二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三.步骤分解 1.海报图片作为div ...
- html5背景图片上放按钮,html5自定义video标签的海报与播放按钮
文章目录 一.问题 1.默认播放按键不好看 2.设置自定义封面图 二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三.步骤分解 1.海报图片作为div的背景 2. ...
- HTML5+CSS大作业——简单的程序员个人博客(7页) 大学个人博客网页制作教程 表格布局网页模板
HTML5+CSS大作业--简单的程序员个人博客(7页) 大学个人博客网页制作教程 表格布局网页模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家 ...
- HTML5期末大作业:淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程 表格布局网页模板 学生HTML静态水网页设计作业成品 简单网页制作代码 学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程 表格布局网页模板 学生HTML静态水网页设计作业成品 简单网页制作代码 学生商城网页作品免费设计 常见网页设计作业 ...
- ps怎么制作流体_ps相框制作教程:ps怎么制作相框效果
今天分享ps相框制作教程:ps怎么制作相框效果,平常看到很多人在秀朋友圈时候,能把照片填充一个相框,让照片瞬间高大上,ps相框制作教程:ps怎么制作相框效果给大家安排上,作为我的粉丝不用羡慕其他人 ...
- h5禁用浏览器下载视频_【HTML5】video 标签禁用自带的下载按钮
h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 video::-internal-media-controls-download-button { display:n ...
- 计算机一级网页制作教程视频教程,0626 网页设计与制作31讲,教学视频,湖南铁道职业技术学院陈承欢...
主教材 Dreamweaver CS3 ISBN:978-7-04-027314-4 主编:陈承欢 高等教育出版社 主教材 网页设计与制作任务驱动式教程 ISBN:978-7-04-037271-7 ...
- 【CMS建站】写给大家看的网站制作教程01—了解网站制作流程
作者 | 杨小爱 来源 | web前端开发(ID:webqdkf) hello,大家好,我是杨小爱,欢迎来到web前端开发公号平台. 这些年里,被读者和周围朋友以及一些认识的人,问的最多的一个问题,就 ...
- 写给大家看的网站制作教程01-了解网站制作流程
作者 | 杨小二 来源 | web前端开发(ID:webqdkf) 前言 这些年里,被读者和周围朋友以及一些认识的人,问的最多的问题,就是,怎么做一个自己的网站?这个难不难学呀? 其实,我知道,很多人 ...
最新文章
- UA MATH567 高维统计I 概率不等式3 亚高斯性与亚高斯范数
- Nginx 教程:基本概念
- 关于栈的写入和延伸的方向
- 服务性服务–服务到服务的通话
- 面试历程六:人真的有时候很奇怪
- mysql 嵌套if标签_对比Excel、MySQL、Python,分别讲述 “if函数” 的使用原理!
- Django +nginx + uwsgi + daphne部署
- 2017.3.22 小z的袜子 思考记录
- TelPhoneManager中的常用方法和状态获取
- matlab 各种文件的读取(及读写问题的解决)
- mysql修改7tf8mb4_更改MySQL数据库的编码为utf8mb4
- 各路技术牛人都推荐的书
- 我的世界光影Java优化_我的世界7款超级棒的光影包推荐 让你的世界从此变得真实无比...
- 你知道数字图像处理的经典Lenna图背后的故事吗
- Gradle使用maven仓库
- Python三十个常见的脚本汇总
- matlab对角替换,matlab矩阵对角最大化实现
- Linux下动态库so查找与函数列表
- m3u8加密文件原理及下载脚本
- 社会生活中的著名法则(一)
热门文章
- Zotero入门教程
- 曲率已驱动了头发——深度分析谷歌AlphaGo击败职业棋手
- OpenCV读取连续多张图片
- python将音频转换成声谱图_每张图片自带BGM?牛津小哥开源神器,实现任意图像转换声谱图...
- android studio怎么改软件扫码界面_Android测试工具入门介绍(二)
- PS图片做羽化效果banner
- 守护进程(内核线程和普通进程)
- php找相似的字符串,php查询相似字符串的方法
- 区分与换算GiB,MiB,KiB;GB,MB,KB;Gib,Mib,Kib;Gb,Mb,Kb;GB/s,MB/s,KB/s,B/s;Gb/s,Mb/s,Kb/s,b/s
- 二手房网签需要注意的事项