span {
display: block;
width: 220px;
height: 240px;
background-image: url(./source/122.png);
background-size: cover;
position: absolute;
top: 60px;
left: 240px;
z-index: 6;
display: none;
}
span em {
box-sizing: border-box;
display: block;
width: 25px;
height: 25px;
padding: 0 4px;
line-height: 20px;
font-size: 24px;
background-color: rgba(255, 81, 0, 0.795);
position: absolute;
right: 1px;
top: 1px;
}
/* 底部栏 */
.footer {
height: 50px;
background-color: rgb(0 0 0 / 35%);
position: absolute;
bottom: 0;
left: 0;
margin: 0;
}
/* 播放按钮 */
.play {
margin: 10px 10px;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 18px;
border-radius: 10px;
color: #fff;
border: 2px solid #fff;
float: left;
}
/* 时间 */
.time {
width: 100px;
height: 50px;
margin: 18px 20px;
float: left;
color: #fff;
}
/* 倍速 */
.quick {
position: absolute;
right: 0;
bottom: 0;
width: 60px;
height: 176px;
/* border: 1px solid rgb(17, 16, 16); */
color: rgb(10, 9, 9);
text-align: center;
margin: 0 10px;
text-align: center;
}
.quick_text {
position: absolute;
top: 130px;
right: 4px;
width: 50px;
height: 30px;
border: 2px solid hotpink;
border-radius: 10px;
color: rgb(243, 230, 230);
text-align: center;
line-height: 30px;
margin: 5px auto;
}
ul {
padding: 0;
width: 50px;
height: 107px;
/* background-color: seagreen; */
display: none;
}
ul li {
list-style-type: none;
padding: 0 11px;
}
.quick:hover .quickList {
display: block;
}
.quickList li:hover {
color: hotpink;
}
/* 进度条 */
.progress {
position: absolute;
top: -61px;
left: 0;
width: 100%;
height: 3px;
background: #fff;
}
.progress .pro {
width: 5px;
height: 3px;
background: rgb(236, 127, 182);
position: absolute;
left: 0;
top: -60px;
}
.bar{
position: absolute;
left: 0;
top: -3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgb(255, 252, 252);
z-index: 8;
}
/* 静音 */
.mute {
position: absolute;
top: 4px;
right: 90px;
width: 50px;
height: 30px;
border: 2px solid hotpink;
border-radius: 10px;
color: rgb(243, 230, 230);
text-align: center;
line-height: 30px;
margin: 5px auto;
font-weight: 700;
}
/* 静音样式 */
.muted {
background-color: aqua;
color: #f40;
}
这个视频的播放暂停，包括进度条要随着视频的播放时间而前进，静音，倍速等功能，需要使用js来操作了。这里的话，我是使用原生JS一个功能一个功能去实现的。
// 获取元素对象
var p = document.getElementsByTagName(‘p’)[0];
var video = document.getElementsByTagName(‘video’)[0];
var div = document.getElementsByTagName(‘div’)[0];
var em = document.getElementsByTagName(‘em’)[0];
var span = document.getElementsByTagName(‘span’)[0];
// 进度条
var progress = document.querySelector(‘.progress’);
var pro = document.querySelector(‘.pro’);
var proSpan = document.querySelector(‘.progress .bar’);
// 获取播放按钮
var play = document.querySelector(‘.play’)[0];
// 隐藏弹出框
em.onclick = function () {
console.log(em);
span.style.display = ‘none’;
}
div.onclick = function (e) {
if (e.target.nodeName === ‘P’) {
if (video.paused) {
video.play();
p.className = “iconfont icon-zantingtingzhi font1”
p.style.color = “#f40”
play.innerHTML = ‘13’
} else {
video.pause();
p.className = “iconfont icon-bofang font1”
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
最后
喜欢的话别忘了关注、点赞哦~
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
)]
[外链图片转存中…(img-VyEpCGoT-1710821798137)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-p3eh2n6K-1710821798137)]
最后
喜欢的话别忘了关注、点赞哦~
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
