HTML5新增的video标签配合原生js，实现视频案例！

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)]

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】