该项视频控件是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> <!--在父组件定义两个数据传入子组件-->使用方法：
通过以上代码来定义子组件，在父组件中添加相应的代码后就可以直接使用，上述的组件代码即为使用方法，由于改代码还在改进，后期若有更好的优化方案会进行更新。