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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/226249.html
標籤：其他
上一篇：電商放大鏡案例