[JavaScript知识库]vedio标签和vediojs配置（vue视频弹窗组件）

直接摆出一个视屏弹窗的vue组件代码
实现效果：
点击父组件中某个按钮后，打开视频弹窗，并且可以通过X按钮关闭
优点：
动态生成与销毁vedio标签，解决hls视频流数据一直在后台请求的问题，避免关闭弹框后，视频流数据传输仍在继续消耗资源。
实现的方法：
1.向外抛出了两个属性：visible和videoURL，visible用于控制弹窗组件的生成与销毁，控制核心是v-if；videoURL是用于接收外部点击后传入的视频地址
2.由于只能在updated上添加vedio标签的原因，只能将vediojs代码写在updated上；引发的问题是，在关闭弹窗时，updated又会触发，进而又会触发一次vediojs代码的执行，在此定义了一个参数statu，并通过取反来标识区分进入和退出时的updated

需要在html入口文件中添加如下配置，用于解析视频

<meta name="referrer" content="no-referrer">

组件代码：

<template>
  <div class="box" v-if="visible">
    <span class="exit" @click="exit">X</span>
    <div class="fadom"></div>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'videojs-contrib-hls'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    videoURL: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      player: null, // 接收定义的vedio,在销毁时使用
      statu: false
    }
  },
  updated () {
    this.statu = !this.statu  // 取反，标识区分进入和退出时的updated
    if (this.statu) {
      this.video()
    }
  },
  methods: {
    exit () {
      this.player.dispose()  // vedio标签销毁，截止视频流的传输
      this.$emit('update:visible', false)
    },
    video () {
      let videoTag = null
      const fadom = document.getElementsByClassName('fadom') // 获取vedio标签存放的父节点，准备在该标签下添加生成vedio标签
      console.log(fadom)
      console.log(fadom.children)
      if (!fadom.children) {
        videoTag = document.createElement('video') //新建一个vedio标签
        videoTag.setAttribute('class', 'video-js vjs-default-skin box')
        videoTag.setAttribute('controls', true)
        videoTag.setAttribute('preload', 'auto')
        videoTag.setAttribute('src', this.videoURL)
        videoTag.setAttribute('width', '800px')
        videoTag.setAttribute('height', '600px')
        // 以上都是使用setAttribute方法给新生成的vedio标签添加属性，更多配置属性可以在vediojs官网上查看并添加
        fadom[0].appendChild(videoTag)  // 将新生成的vedio标签添加在预设好的父节点下
      }
      const options = {
        sources: [
          {
            src: this.videoURL, // 配置视频地址
            type: 'video/mp4'  // 配置解析的视频文件类型
          }
        ]
      }
      this.player = videojs(videoTag, options, function () {
        this.play()  // 使用vediojs方法，实现视频播放的功能，videoTag是上面生成的新vedio标签，optins是上面配置的sources属性
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 600px;
  width: 800px;
  z-index: 9999;
  .video {
    width: 800px;
    height: 600px;
  }
  .exit {
    position: absolute;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 25px;
    text-align: center;
    line-height: 65px;
    z-index: 10000;
    color: rgb(255, 255, 255);
    background-color: black;
    opacity: 0.5;
  }
}
</style>

学习到的新的理解
1.子组件在父组件渲染时便开始渲染，并且会在父组件mounted之前执行完mounted,但是，此处的子组件虽然mounted完了，但是由于标签由v-if控制生成的原因，所以即使mounted完了，也不可能拿到里面的DOM元素，需要通过updated去拿
和之前理解上的区别是：之前认为一个页面组件的首次渲染完毕展示出来，就是这个页面组件的mouted；但是此处由于它作为子组件的原因，在父组件渲染完毕之前，它的mounted便以结束