数据可视化大屏 项目中,需要播放海康的视频,因为在之前的项目中,使用过海康的视频插件体验非常差,所以和后端同学沟通后改用hls协议的视频。这里使用的video.js来播放hls协议的视频。
安装依赖
pnpm i video.js
组件封装
<template>
<div class="video-js">
<video ref="videoPlayer" class="video-js" controls></video>
</div>
</template>
<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
export default {
props: {
url: {
type: String,
required: true,
}
},
mounted() {
this.createPlayer();
},
beforeUnmount() {
if (this.player) {
this.player.dispose();
}
},
methods: {
createPlayer() {
const options = {
controls: true,
autoplay: true,
preload: 'auto',
url: this.url
};
this.player = videojs(this.$refs.videoPlayer, options);
this.player.src({type: 'application/x-mpegURL', src: options.url});
}
}
};
</script>
<style>
.video-js {
position: relative;
width: 100%; /* 将宽度设置为100%,以适应外部容器的宽度 */
height: 100%; /* 将高度设置为100%,以适应外部容器的高度 */
}
</style>
使用
import VideoPlayer from '@/components/VideoPlayer/index.vue';
components: {VideoPlayer},
<VideoPlayer v-if="item.hlsAddress" :url="item.hlsAddress"></VideoPlayer>