该项视频控件是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> <!--在父组件定义两个数据传入子组件-->
使用方法:
通过以上代码来定义子组件,在父组件中添加相应的代码后就可以直接使用,上述的组件代码即为使用方法,由于改代码还在改进,后期若有更好的优化方案会进行更新。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。