• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

ES6面向对象 观察者模式实现video视频的弹幕功能与基础组件

互联网 diligentman 1周前 (11-22) 4次浏览

ES6面向对象实现 video 视频的弹幕功能与基础组件

实现目标
1、打开网页自动播放视频(因为谷歌不支持video标签在有声音的情况下自动播放,所以要设置muted)
2、使用观察者模式,监视每一条弹幕
3、将每一条弹幕元素加入Set列表中,给每一条弹幕添加定时器,使他运动,当文字尾部移出视频时,将该弹幕元素从Set列表中删除,同时删除该元素的定时器
4、实现重写controls组件,暂停,上一个视频,下一个视频
5、实现当前视频结束时,播放列表中下一个视频
6、实现视频网页开关灯
7、ES6面向对象

实现效果
ES6面向对象 观察者模式实现video视频的弹幕功能与基础组件
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">|&lt;</button></div>
      <div class="zanting"><button class="pause">暂停</button></div>
      <div class="xiayiji"><button class="nextone">&gt;|</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;
  }


喜欢 (0)