前端视频控件使用文档

该项视频控件是 npm 库中的一个控件，该控件的源地址为：https://www.npmjs.com/package…。由于此款控件使用起来较为简单，且没有过多复杂按钮，只能实时播放摄像头画面，适合项目要求，因此选定该款控件作为视频播放控件。

总体思路：现将这款控件的代码封装为一个组件，可以方便全局实时调用。这款控件通过不同的 id 名称可以进行多次的调用，因此在父组件中定义不同的 id 名称以及视频 url 进行传参传入组件中。【相对原始代码有修改】

代码弊端：初始的代码需要在加载之前就提供相应的视频 url，后期通过修改 url 无法进行重新调用，为了能通过后台请求拿到相应 url，我采用了 xuex 数据池存值的方式，先加载请求取到相应的 url，再进行组件的调用。(可以通过组件调用方式进行引用，在调用组建的时候传入 url)

组件代码：

首先在控制台进行组件的安装：npm i hls.js

<template>
  <video :id=videoValue></video> // id 名称为父组件传来的 videoValue 的值
</template>
<script>
  import Hls from 'hls.js'; // 引用 Hls 组件
  export default {data () {
      return {
        value: this.videoValue,
        addre: this.add,
        // cameraUrl 为请求后台得到的视频 url 数组
        cameraUrl: this.$store.getters.getCameraGet.cameraGets 
      }
    },
    props: ['videoValue', 'add'], // 父组件传来的 id 名称以及下标值
    mounted() {this.videoData();
    },
    methods: {videoData() {if (this.addre === 0) { // 通过父组件传来的下标值进行判断，找出后台传来对应的视频 url
          var address = this.cameraUrl[0];
        } else if (this.addre === 1) {address = this.cameraUrl[1]
        }
        let video = document.getElementById(this.videoValue); // 找到父组件传过来的 id 标签
        if (Hls.isSupported()) { // 如果 Hls 插件支持
          let hls = new Hls();
          hls.loadSource(address); // 将 url 传入本地数据源
          hls.attachMedia(video);
          hls.on(Hls.Events.MANIFEST_PARSED, function() {video.play(); // 播放视频
          });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
          video.src = address; // 不支持的时候，将 url 传入视频链接中
          video.addEventListener('canplay', function() {video.play();
          });
        }
      }
    }
  }
</script>

在父组件中的代码为：

import video from '../components/video.vue'; // 引用组件
export default {data () {
      return {
        videoValue0: 'video0', // 定义组件 id
        url0: 1, // 定义下标值
        videoValue1: 'video1',
        url1: 0
      }
   },
   components: {'videotp': video // 给组件定义一个标签}
}

通过标签引用：

<videotp :videoValue="videoValue3" :add="url3" ></videotp>  <!-- 在父组件定义两个数据传入子组件 -->

使用方法：

通过以上代码来定义子组件，在父组件中添加相应的代码后就可以直接使用，上述的组件代码即为使用方法，由于改代码还在改进，后期若有更好的优化方案会进行更新。