video的销毁和重构

最新推荐文章于 2024-09-13 22:09:05 发布

努力让自己的选择变得正确

最新推荐文章于 2024-09-13 22:09:05 发布

阅读量7.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_40673860/article/details/108480906

版权

前端专栏收录该内容

20 篇文章 2 订阅

订阅专栏

单个video标签的销毁

 if (this.videoPlayer) {
        this.videoPlayer.dispose()
        this.videoPlayer = null
  }

多个video标签的销毁

// 比如:this.rtmpArr=[] 接受多个video的时候一定要给个长度 this.rtmpArr=new Array(num)  否则接受完获取不到this.rtmpArr的长度
if (this.rtmpArr.length > 1) {
        for (let i = 1; i < this.rtmpArr.length; i++) {
          this.rtmpArr[i].dispose()
        }
        this.rtmpArr = [] // 多个video销毁之后记得使this.rtmpArr为[],因为虽然销毁了但是内部还存在video的内置方法，重构再次赋值的时候会报错
      }

多个video标签的赋值

// 这里加this.$nextTick的原因是重构video之后不加会获取不到video标签导致下面videojs赋值后找不到元素报错
          this.$nextTick(() => {
            this.rtmpArr = new Array(this.multiScreen.length)
            for (let i = 1; i < this.multiScreen.length; i++) {
              this.rtmpArr[i] = videojs(this.multiScreen[i].id, {}, () => {
                this.rtmpArr[i].src({
                  type: 'rtmp/flv',
                  src: this.multiScreen[i]['live-address']
                })
              })
            }
         })

video标签的重构

 refactorVideo() {
        this.videoPlayer.dispose()
        this.$refs.videoArea.innerHTML = `<video id="livePlays" ref="videoPlayer" style="width:100%;height:100%"
        class="video-js vjs-default-skin vjs-big-play-centered hidden-controls" autoplay="true"
          controls></video>`
        if (this.rtmpArr.length > 1) {
          for (let i = 1; i < this.rtmpArr.length; i++) {
            this.rtmpArr[i].dispose()
          }
          this.rtmpArr = []
        }
        if (this.multiScreen.length > 1) {
          this.$nextTick(() => {
            let lis = this.$refs.urlList.getElementsByClassName('videoPictureArea')
            for (let i = 0; i < lis.length; i++) {
              lis[i].getElementsByClassName('videoPicture')[0].innerHTML = `<video style="width:182px;height:102px" id="${this.multiScreen[i + 1].id}" muted="true" autoplay="true"
                       class="video-js vjs-default-skin vjs-big-play-centered hidden-controls"></video>`
            }
          })
        }
      },