使用原因
之前用海康的视频WEB插件实现过监控画面在前端页面的实时预览，但是会有两个问题：
1、该插件需要先进行安装，而且每次开机后也要重新启动该插件；
2、使用该插件很难更改其样式，只能使用其自带的窗口（1x1,2x2等），如过我要一个1x2的窗口就无法实现；
所以才产生了使用其它方法实现前端页面实时预览监控画面的想法。
两者优缺点
1、视频WEB插件
缺点：需要安装插件；样式难以更改；
优点：视频响应快，流畅性好，可以同时查看多个监控画面；
2、H5视频播放器开发包
缺点：视频流畅性查，卡顿等问题，特别是有查看多个监控画面的需求时不要用这种方法；
优点：不用安装插件；样式更改简单；
使用方法
1、下载开发包
2、将下载的开发包放入项目中
在项目中的public文件夹下新建一个h5player的文件夹（这里的文件夹名字可以自己取，后端引入时注意一下就好了），接着将刚才下载的开发包中的bin文件夹里面所有的文件都赋值到项目中的h5player文件夹下。
3、在项目中引入开发包文件
在public/index.html文件里引入
4、封装后player的demo
新增.vue文件，复制下面的代码
<template>
<div>
<div :id="preId" style="width: 400px; height: 200px"></div>
</div>
</template>
<script>
export default {
name: "h5HkVideo",
props: {
preUrl: {
type: String,
},
preId: {
type: String,
}
},
data() {
return {
// 播放器对象
player: null,
};
},
mounted() {
this.$nextTick(() => {
this.initPlayer();
});
},
methods: {
/**
* 初始化播放器
*/
initPlayer() {
this.player = new window.JSPlugin({
// 需要英文字母开头 必填
szId: this.preId,
// 必填,引用H5player.min.js的js相对路径
szBasePath: "/h5player",
// // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
// iWidth: 600,
// iHeight: 400,
// // 分屏播放，默认最大分屏4*4
// iMaxSplit: 16,
// iCurrentSplit: 1,
// // 样式
// oStyle: {
// border: '#343434',
// borderSelect: '#FFCC00',
// background: '#000'
// }
});
this.initPlugin();
},
/**
* 事件初始化
*/
initPlugin() {
this.player.JS_SetWindowControlCallback({
windowEventSelect(iWindIndex) {
// 插件选中窗口回调
console.log("windowSelect callback: ", iWindIndex);
},
pluginErrorHandler(iWindIndex, iErrorCode, oError) {
// 插件错误回调
console.error(
`window-${iWindIndex}, errorCode: ${iErrorCode}`,
oError
);
},
windowEventOver(iWindIndex) {
// 鼠标移过回调
// console.log("鼠标移过回调", iWindIndex);
},
windowEventOut(iWindIndex) {
// 鼠标移出回调
// console.log("鼠标移出回调", iWindIndex);
},
windowFullCcreenChange(bFull) {
// 全屏切换回调
console.log("全屏切换回调", bFull);
},
firstFrameDisplay(iWndIndex, iWidth, iHeight) {
// 首帧显示回调
console.log("首帧显示回调", iWndIndex, iWidth, iHeight);
},
performanceLack(iWndIndex) {
// 性能不足回调
console.log("性能不足回调", iWndIndex);
},
});
// this.play();
},
/**
* 播放
*/
play(data) {
let preUrl;
if (data != undefined) {
preUrl = data; // 播放地址
} else {
preUrl = this.preUrl; // 播放地址
}
const param = {
playURL: preUrl,
// 1：高级模式 0：普通模式，高级模式支持所有
mode: 1,
};
// 当前播放窗口下标
let index = 0;
// console.log(this.playerArr);
this.player.JS_Play(preUrl, param, index).then(
() => {
// 播放成功回调
console.log("播放成功");
},
(err) => {
console.log("播放失败");
console.info("JS_Play failed:", err);
}
);
},
},
};
</script>
5、使用封装的组件
<template>
<div class="video" ref="videoTest">
<test-web-h-5 :preId="preId1" ref="h5Player1"></test-web-h-5>
<test-web-h-5 :preId="preId2" ref="h5Player2"></test-web-h-5>
<el-button type="primary" @click="handlePlay('1')">播放视频一</el-button>
<el-button type="primary" @click="handlePlay('2')">播放视频二</el-button>
</div>
</template>
<script>
import TestWebH5 from './components/testWebH5.vue'
export default {
components: {
TestWebH5,
},
data() {
return {
preId1: 'player',
preId2: 'player2'
}
},
methods: {
handlePlay(val) {
if (val === '1') {
this.$refs.h5Player1.play("ws://视频一地址")
} else {
this.$refs.h5Player2.play("ws://视频二地址")
}
},
},
</script>
<style scoped lang="scss">
.video {
width: 100%;
height: 100%;
}
</style>
