ES6面向对象实现 video 视频的弹幕功能与基础组件
实现目标
1、打开网页自动播放视频（因为谷歌不支持video标签在有声音的情况下自动播放，所以要设置muted）
2、使用观察者模式，监视每一条弹幕
3、将每一条弹幕元素加入Set列表中，给每一条弹幕添加定时器，使他运动，当文字尾部移出视频时，将该弹幕元素从Set列表中删除，同时删除该元素的定时器
4、实现重写controls组件，暂停，上一个视频，下一个视频
5、实现当前视频结束时，播放列表中下一个视频
6、实现视频网页开关灯
7、ES6面向对象
实现效果
html代码：
实现思路：
1、创建需要的html标签元素
2、引入play.js实现页面组件功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="warp">
<div class="videoWarp">
<video controls></video>
</div>
<div class="inputWarp">
<input type="text" /><button class="send">发送</button>
</div>
</div>
<div class="guandengWarp"><button class="guandeng">关灯</button></div>
<div class="buttons">
<div class="shangyiji"><button class="beforone">|<</button></div>
<div class="zanting"><button class="pause">暂停</button></div>
<div class="xiayiji"><button class="nextone">>|</button></div>
</div>
<script type="module">
// ES6面向对象写法
import Play from "./js/Play.js"
// 将视频地址放入数组中，播放时controls操作切换当前播放视频
var arr = [
"./video/【鬼灭全程踩点燃】这一击赌上现在的我，献出我的一切！ - 1.鬼灭踩点(Av65423285,P1).mp4",
"./video/【1080漫威衔接踩点向】前方高能！让人相当舒服的踩点与衔接！ - 1.The Cab - Lock Me Up换源(Av39492241,P1).mp4",
"./video/【漫威DC踩点1080p】前方高能！使人起鸡皮疙瘩的踩点与衔接的视觉盛宴！ - 1.Gavin Degraw - Fire(Av46996647,P1).mp4",
"./video/前方高帅！感受极致踩点带来的视听盛宴！ - 1.Light That Fire(Av795229648,P1).mp4",
"./video/当你拔剑的那一刻，世界：你毛都不是！ - 1.极限(Av79028837,P1).mp4",
];
var play= new Play(arr);
</script>
</body>
</html>
play.js是视频播放组件（面向对象写法）
实现思路：
1、实现最基础的视频功能
2、对每个组件实现功能
3、引入弹幕组件
import Danmu from "./Danmu.js";
// 引入弹幕组件
export default class Play {
input;//弹幕输入框
video;//视频播放video标签
arr = [];//视频地址
sendMsg;//发送弹幕按钮（也可以直接回车）
light;//开关灯模式
beforone;//切换上一个视频
pause;//暂停、播放按钮
nextone;//切换下一个视频
num = 0;//当前播放视频在数组中的下标
bool = false;//用来控制开关灯模式的Boolen
playBool = false;//用来控制视频暂停、播放的Boolen
constructor(_arr) {
// 传入视频地址数组
this.arr = _arr;
// 获取弹幕输入内容
this.input = document.querySelector("input");
document.addEventListener("keyup", (e) => this.keyHandler(e));
// 获取video
this.video = document.querySelector("video");
//设置当前播放视频为数组中第一个地址的视频
this.video.src = this.arr[this.num];
//侦听视频加载完成后事件
this.video.addEventListener("loadedmetadata", (e) => this.loadHandler(e));
this.video.addEventListener("ended", (e) => this.endHandler(e));
// 发弹幕按钮的点击事件
this.sendMsg = document.querySelector(".send");
this.sendMsg.addEventListener("click", (e) => this.keyHandler(e));
// 关灯、开灯、上一个视频、暂停、播放视频、下一个视频
this.light = document.querySelector(".guandeng");
this.light.addEventListener("click", (e) => this.lightHandler(e));
this.beforone = document.querySelector(".beforone");
this.beforone.addEventListener("click", (e) => this.clickHandler(e));
this.pause = document.querySelector(".pause");
this.pause.addEventListener("click", (e) => this.clickHandler(e));
this.nextone = document.querySelector(".nextone");
this.nextone.addEventListener("click", (e) => this.clickHandler(e));
}
// 单击上一个视频、暂停、播放视频、下一个视频按钮时的事件
clickHandler(e) {
switch (e.currentTarget) {
case this.beforone:
// 切换播放上一个视频
if (this.num === 0) this.num = this.arr.length - 1;
else this.num = this.num - 1;
this.video.src = this.arr[this.num];
// 因为切换地址后会自动播放，所以需要判断当前播放状态，更改播放、暂停按钮显示的文字和功能
if (this.playBool) this.playBool = !this.playBool;
this.pause.textContent = "暂停";
break;
case this.pause:
// 判断当前播放状态，实现暂停或开始播放
this.playBool = !this.playBool;
if (!this.playBool) {
this.video.play();
this.pause.textContent = "暂停";
} else {
this.video.pause();
this.pause.textContent = "播放";
}
break;
case this.nextone:
// 切换播放上一个视频
if (this.num === this.arr.length - 1) this.num = 0;
else this.num = this.num + 1;
this.video.src = this.arr[this.num];
// 因为切换地址后会自动播放，所以需要判断当前播放状态，更改播放、暂停按钮显示的文字和功能
if (this.playBool) this.playBool = !this.playBool;
this.pause.textContent = "暂停";
break;
}
}
// 当前视频播放结束后播放数组中下一个
endHandler(e) {
this.num = this.num + 1;
// 判断如果当前视频是播放列表中的最后一个视频，那么下一个放的是列表的第一个视频
if (this.num === this.arr.length) this.num = 0;
this.video.src = this.arr[this.num];
this.video.play();
}
// 点击开灯、关灯
lightHandler(e) {
// 判断当前开关灯状态，实现开灯或关灯
this.bool = !this.bool;
if (this.bool) {
this.light.style.backgroundColor = "white";
this.light.style.color = "black";
this.light.textContent = "开灯";
document.documentElement.style.backgroundColor = "black";
} else {
this.light.style.backgroundColor = "black";
this.light.style.color = "white";
this.light.textContent = "关灯";
document.documentElement.style.backgroundColor = "white";
}
}
// 加载视频自动播放
loadHandler(e) {
// 需要设置静音属性，因为谷歌限制非静音视频autoplay
this.video.muted = true;
this.video.play();
this.video.volume = 1;
}
// 发送弹幕
keyHandler(e) {
// 当按下回车或点击发送按钮时，执行弹幕组件
if (e.keyCode === 13 || e.type === "click") {
if (this.input.value.trim().length === 0) return;
var danmu = new Danmu(this.input.value);
danmu.appendTo(".videoWarp");
this.input.value = "";
}
}
}
Danmu.js是弹幕组件，主要用来创建显示弹幕和移除弹幕弹幕运动等功能
实现思路：
1、设置弹幕样式
2、弹幕位置
3、弹幕怎样运动
4、引入TimeManager.js使用观察者模式控制每个弹幕元素
import TimeManager from "./TimeManager.js"
export default class Danmu{
rect;//弹幕显示区域设定用到的数据
x;//弹幕坐标
speed=2;//弹幕移动速度
width;//弹幕宽度
constructor(txt){
this.elem=this.createElem(txt);
}
//设置传入的弹幕样式，并创建该弹幕元素div
createElem(txt){
if(this.elem) return this.elem;
var div=document.createElement("div")
Object.assign(div.style,{
color:"white",
fontSize:"30px",
position:"absolute",
whiteSpace:"nowrap",
})
div.textContent=txt
return div
}
//添加弹幕的区域
appendTo(parent){
if(typeof parent==="string")parent=document.querySelector(parent);
parent.appendChild(this.elem);
//设定弹幕显示为视频的1/4屏
this.rect=parent.getBoundingClientRect();
Object.assign(this.elem.style,{
top:Math.random()*this.rect.height/4+"px",
left:this.rect.width+"px"
});
// 获取设置该弹幕初始显示位置和弹幕宽度
this.x=this.rect.width,
this.width=this.elem.offsetWidth;
//将该弹幕元素添加到Set列表中
TimeManager.instance.add(this)
}
// 弹幕运动
update(){
// 设置弹幕从右往左运动
if(!this.width)return;
this.x-=this.speed;
this.elem.style.left=this.x+"px";
// 当当前整个弹幕最右边已经走出视频区域时，从Set列表中删除该弹幕，并删除该弹幕的div元素和对应的事件
if(this.x<-this.width){
TimeManager.instance.remove(this);
this.elem.remove();
this.elem=null
}
}
}
TimeManager.js观察者模式组件，对每个弹幕元素进行观察管理
实现思路：
1、观察者模式实现对每个弹幕元素的监视操作
2、使用Set列表存储弹幕元素
3、移除set列表中不需要的弹幕元素
export default class TimeManager {
static _instance;
list = new Set();
ids;
constructor() {}
static get instance() {
if (!TimeManager._instance) {
Object.defineProperty(TimeManager, "_instance", {
value: new TimeManager(),
});
}
return TimeManager._instance;
}
// 添加删除，当有内容进入添加到list，删完了就清除setinterval
add(elem) {
this.list.add(elem);
if (this.list.size > 0 && !this.ids) {
this.ids = setInterval(() => this.update(), 16);
}
}
remove(elem) {
this.list.delete(elem);
if (this.list.size === 0 && this.ids) {
clearInterval(this.ids);
this.ids = 0;
}
}
update() {
this.list.forEach((item) => {
if (item.update) item.update();
});
}
}
css样式
html {
background-color: white;
}
body {
position: relative;
min-width: 1125px;
}
body,
html,
input,
button {
margin: 0;
padding: 0;
}
input {
outline: none;
width: 888px;
height: 34px;
padding: 0;
border: 1px solid pink;
border-radius: 5px;
text-indent: 20px;
font-size: 28px;
line-height: 36px;
}
.warp {
display: block;
height: 580px;
width: 960px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.videoWarp {
position: relative;
height: 540px;
width: 960px;
}
video {
height: 540px;
width: 960px;
}
.send {
outline: none;
color: white;
font-weight: 700;
float: right;
height: 36px;
width: 60px;
font-size: 20px;
text-align: center;
border-radius: 5px;
background-color: skyblue;
border: 1px solid skyblue;
}
.inputWarp {
padding-top: 4px;
height: 36px;
width: 960px;
}
.guandengWarp {
height: 300px;
width: 300px;
position: absolute;
top: 50px;
right: 50px;
}
.guandeng {
outline: none;
border-radius: 40px;
height: 300px;
width: 300px;
font-size: 100px;
background-color: black;
color: white;
}
.buttons {
display: flex;
height: 300px;
width: 960px;
margin: 0 auto;
justify-content: space-between;
}
.nextone,
.pause,
.beforone {
outline: none;
font-size: 100px;
border-radius: 300px;
height: 300px;
width: 300px;
}
.nextone {
background-color: orange;
}
.pause {
background-color: blue;
}
.beforone {
background-color: green;
}
1839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
