需要完成的效果是：点击树状图然后打开相应的视频，可以指定窗口切换，并在此基础上实现视频播放、关闭视频、开启声音、关闭声音、分屏以及云台操作（包括左右移动、上下移动以及缩放）
使用的海康web插件：由海康官网下载的H5视频播放器开发包 V2.1.2，解压完毕后目录如下：
第一步：引入必要的文件
在public下面创建文件夹，文件名称可以自己起名字，我这里的是lib下面的js，然后把demo文件下的这些文件复制到所创建的文件夹下，最后在public/index.html引入所需要的文件
引入：
<script src="<%= BASE_URL %>lib/js/h5player.min.js" charset="utf-8"></script>然后在views下面创建一个vue文件：
父组件：
<template>
<div>
<div style="display: flex;">
<el-tree
style="width: 500px;height: 1280px;overflow: auto;"
:data="treeDataList"
:props="defaultProps"
node-key="id" ref="tree"
:default-checked-keys="checkedKeys"
:render-content="renderContent"
@node-click="handleNodeClick"></el-tree>
<div>
<div ref="video">
<video-player class="plyer" ref="player" :option="videoOption" :playback="playback" style="margin-left: 50px;" @getCurrentIndex = "getCurrentIndex">
</video-player>
</div>
<div style="margin-left: 50px;margin-top: 10px;">
<el-tooltip class="item" effect="dark" content="一分屏" placement="top-end">
<img src="xxx/video/splitOne.png" alt="一分屏" @click="screenCut(1)">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="四分屏" placement="top-end">
<img src="xxx/video/splitFour.png" alt="四分屏" @click="screenCut(2)">
</el-tooltip>
<!-- <el-tooltip class="item" effect="dark" content="九分屏" placement="top-end">
<img src="xxx/video/splitNine.png" alt="九分屏" @click="screenCut(3)">
</el-tooltip> -->
<el-tooltip class="item" effect="dark" content="暂停播放" placement="top-end">
<img src="xxx/video/stop.png" alt="暂停移动" @click="stopPlays()">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="开启声音" placement="top-end">
<img v-show="showSound" src="xxx/video/openSound.png" alt="开启声音" @click="openSound()">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="关闭声音" placement="top-end">
<img v-show="!showSound" src="xxx/video/closeSound.png" alt="关闭声音" @click="closeSound()">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="云台" placement="top-end">
<img src="xxx/video/move.png" alt="云台" @click="show()">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="向左移动" placement="top-end">
<img v-show="showOperate" src="xxx/video/left.png" alt="向左移动" @click="control('left')">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="向右移动" placement="top-end">
<img v-show="showOperate" src="xxx/video/right.png" alt="向右移动" @click="control('right')">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="向上移动" placement="top-end">
<img v-show="showOperate" src="xxx/video/up.png" alt="向上移动" @click="control('up')">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="向下移动" placement="top-end">
<img v-show="showOperate" src="xxx/video/down.png" alt="向下移动" @click="control('down')">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="放大" placement="top-end">
<img v-show="showOperate" src="xxx/video/big.png" alt="放大" @click="control('zoom_in')">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="缩小" placement="top-end">
<img v-show="showOperate" src="xxx/video/small.png" alt="缩小" @click="control('zoom_out')">
</el-tooltip>
</div>
</div>
</div>
</div>
</template>
<script>
import VideoPlayer from "./videoPlayer";
import {randomLenNum} from "@/util/util"
export default {
components: {
VideoPlayer
},
data() {
return {
playback: {
startTime: '2021-07-26T00:00:00',
endTime: '2021-07-26T23:59:59',
// valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
seekStart: '2021-07-26T12:00:00',
rate: ''
},
videoOption:{
width:"2200px",//窗口的宽度
height:"1280px",//窗口的高度
split:2,//2*2 四个屏幕
id:randomLenNum(6)
},
treeDataList: [],
defaultProps: {
children: 'children',
label: 'label'
},
cutnum: 2,
showOperate: false,
currentIndex: 0,
cameraIdList: [],
cameraIdData: [],
currentCameraId: "",
showSound: true
}
},
mounted() {
setTimeout(() => {
this.$refs.player.createPlayer(this.videoOption);
this.loadParentTree();
},0);
//关闭页面的时候销毁以防页面关闭了还会有声音
this.$once('hook:beforeDestroy', () => {
this.closeSound()
})
},
methods:{
show(){//显示云台里面的上下左右操作按钮
this.showOperate = !this.showOperate
},
/* 控制方向 */
control(type) {
//拿到当前选中窗口id
this.currentCameraId = this.cameraIdList[this.currentIndex].cameraId
this.$axios.get("xxx?id=" + this.currentCameraId + '&command=' + type)
.then(() => {})
},
/* 分屏 */
screenCut(num) {
this.cutnum = num
this.videoOption.split = num
setTimeout(()=>{
this.$refs.player.arrangeWindow(num)
},500)
},
/* 暂停播放 */
stopPlays() {
this.$refs.player.stopPlay(this.currentIndex);
},
//获取当前选中窗口的索引
getCurrentIndex(index) {
this.currentIndex = index
if(this.cameraIdList.length - 1 > index) {
this.currentCameraId = this.cameraIdList[this.currentIndex].cameraId
}
},
/* 开启声音 */
openSound() {
this.showSound = !this.showSound
this.$refs.player.openSound(this.currentIndex);
},
/* 关闭声音 */
closeSound() {
this.showSound = !this.showSound
this.$refs.player.closeSound(this.currentIndex);
},
loadParentTree(){
this.cameraIdData = []
for(let i =0;i < 9;i++) {
this.cameraIdData.push({
stream: "",
cameraId: ""
})
}
this.$axios.get("xxx/tree").then(res=>{
const data = res.data.data;
this.treeDataList = data
// 默认加载第一个
this.$axios.get("xxxgetliu?type=" + this.treeDataList[0].type + "&id=" + this.treeDataList[0].id + "&ping=" + this.cutnum*this.cutnum).then(res=>{
const dataList=res.data.data;
this.dataProcess(dataList)
this.cameraIdList = dataList
})
})
},
handleNodeClick(data,node,b) {
if(data.type == "parent") {//如果当前点击的是父级的话，默认加载当前分屏的数量
this.$axios.get("xxx/getliu?type=" + data.type + "&id=" + data.id + "&ping=" + this.cutnum*this.cutnum).then(res=>{
const dataList=res.data.data;
this.dataProcess(dataList)
this.cameraIdList = dataList
})
} else if(data.type == "child") {//当前点击的是子级
this.$axios.get("xxx/getliu?type=" + data.type + "&id=" + data.id + "&ping=" + this.cutnum*this.cutnum).then(async res=>{
const dataList=res.data.data;
await this.loadVideo(dataList[0].stream,this.currentIndex);
for(let i =0;i < this.cameraIdData.length ;i++) {
for(let j =0;j < this.cameraIdList.length ;j++) {
if(i == j) {
this.cameraIdData[i].stream = this.cameraIdList[j].stream
this.cameraIdData[i].cameraId = this.cameraIdList[j].cameraId
}
}
}
this.cameraIdData[this.currentIndex].stream = dataList[0].stream
this.cameraIdData[this.currentIndex].cameraId = dataList[0].cameraId
})
}
},
async dataProcess(arr,type) {
for(let i = 0; i < arr.length; i++){
await this.loadVideo(arr[i].stream,i,type);
}
},
loadVideo(liuName,index,type){
let param = {
url: liuName,
index: index
}
this.$refs.player.play(param);
},
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{data.label}</span>
<span>{data.count ? '(' + data.count + ')' : ''}</span>
</span>);
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-tree-node:focus>.el-tree-node__content {
background-color: transparent !important;
}
::v-deep .el-tree {
background: transparent !important;
color: #fff;
}
::v-deep .el-tree-node>.el-tree-node__children{
background-color: transparent;
}
::v-deep .el-tree-node__label {
font-size: 30px;
height: auto;
line-height: 60px;
}
::v-deep .el-tree-node,
::v-deep .el-tree-node__content {
height: auto;
line-height: 60px;
align-items: flex-start;
}
::v-deep .el-tree-node__expand-icon {
font-size: 40px;
}
::v-deep .el-tree-node__content:hover,
::v-deep .el-upload-list__item:hover,
::v-deep .el-tree-node.is-current>.el-tree-node__content {
background-color: transparent;
}
::v-deep .custom-tree-node{
font-size: 30px;
}
img {
display: inline-block;
width: 40px;
height: 40px;
margin: 0 20px;
cursor: pointer;
}
::v-deep [class^=el-icon-]{
font-size: 40px;
color: #fff;
margin: 0 20px;
cursor: pointer;
}
</style>子组件：
<template>
<!-- <el-container>
<el-row>
<el-input v-model="code" placeholder="输入监控点编码" @change="onChangeCode"></el-input>
<el-button @click="onSubmit">默认预览</el-button>
<el-button @click="onTwoSubmit(2)">4分屏</el-button>
<el-button @click="onTwoSubmit(4)">16分屏</el-button>
<el-button @click="onTwoSubmit(8)">64分屏</el-button>
</el-row>
<el-row>
<div id="player" style="width: 800px;height: 800px;"></div>
</el-row>
</el-container> -->
<div :id="`player${option.id}`"></div>
</template>
<script>
export default {
name:"VideoPlayer",
props:{
option: {
id: {
type: String,
default: ""
},
url:{
type: String,
default: ''
},
beginTime:{
type: String,
default: ''
},
endTime:{
type: String,
default: ''
},
width:{
type: String,
default: '784px'
},
height:{
type: String,
default: '440px'
},
split:{
type:Number,
default:1
},
index:{
type:Number,
default:0
},
},
playback: {
startTime:{
type: String,
default: ''
},
endTime:{
type: String,
default: ''
},
seekStart:{
type: String,
default: ''
},
rate: {
type: String,
default: ''
}
}
},
data() {
return {
player: null,
count: 0
}
},
mounted() {
this.$nextTick(() => {
this.$el.style.setProperty('display', 'block');
this.$el.style.setProperty('width', this.option.width||"784px");
this.$el.style.setProperty('height', this.option.height||"440px");
// this.initPlayer(this.option);
// this.play(this.option);
});
},
// watch:{
// option(){
// if(this.option){
// this.play(this.option);
// }
// }
// },
methods: {
initPlayer(option) {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
this.player = new window.JSPlugin({
// 需要英文字母开头 必填,
szId: 'player'+option.id,
// 必填,引用H5player.min.js的js相对路径
szBasePath: '../../../../lib/js',
// 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
// iWidth: 600,
// iHeight: 400,
// 分屏播放，默认最大分屏4*4
iMaxSplit: 4,
iCurrentSplit: option.split,
openDebug:false,
// 样式
oStyle: {
border: '#343434',
borderSelect: '#FFCC00',
background: '#000'
}
});
},
play(option,callback) {
return new Promise((resolve) => {
const param = {
playURL: option.url,
mode: 1
}
let index = option.index;
if(option.beginTime&&option.endTime) {
this.player.JS_Play(option.url, param, index,option.beginTime,option.endTime).then(() => {
// 播放成功回调
resolve(true);
},
(err) => {
resolve(false);
console.log('播放失败')
});
} else {
this.player.JS_Play(option.url,param,index).then(() => {
resolve(true);
},(err) => {
resolve(false);
console.log("play fail");
})
}
})
/* console.log(option);
const _this = this;
const param = { playURL: option.url,mode: 1};
var index=option.index||0;
// if (!index) {
// index = 0
// }
if(option.beginTime&&option.endTime){
_this.player.JS_Play(option.url, param, index,option.beginTime,option.endTime).then(() => {
// 播放成功回调
},
(err) => {
console.log('播放失败')
});
}else{
_this.player.JS_Play(option.url, param, index).then(() => {
// 播放成功回调
},
(err) => {
console.log('播放失败')
});
} */
},
init() {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
setTimeout(()=>{
this.player.JS_Resize()
},50)
})
},
reSize(){
this.player.JS_Resize()
},
/* getTraceId(curIndex){
return new Promise((resolve) => {
this.player.JS_GetTraceId(curIndex).then((traceId) => {
console.log(this.player,traceId,"185");
resolve(traceId);
},(err) => {
console.log(err);
})
})
}, */
createPlayer(option) {
this.player = new window.JSPlugin({
szId: 'player'+option.id,
szBasePath: '../../../../lib/js',
iMaxSplit: 4,
iCurrentSplit: option.split,
openDebug: false,
oStyle: {
border: '#343434',
borderSelect: '#FFCC00',
background: '#000'
}
});
// 事件回调绑定
this.player.JS_SetWindowControlCallback({
windowEventSelect: async (iWndIndex)=> { //插件选中窗口回调
console.log(iWndIndex);
// let traceId = await this.getTraceId(iWndIndex);
// console.log(traceId,"traceId");
this.$emit("getCurrentIndex", iWndIndex);
},
pluginErrorHandler: (iWndIndex, iErrorCode, oError)=> { //插件错误回调
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
if(iErrorCode == "0x12f910012" || iErrorCode == "0x01900050" || iErrorCode == "0x01b01307") {
this.$message.warning("窗口取流失败，详情根据错误码在运管后台进行查询.")
} else if(iErrorCode == "0x12f910011") {
this.$message.warning("流中断，电脑配置过低，程序卡主线程都可能导致流中断")
} else if(iErrorCode == "0x12f910010") {
this.$message.warnng("取流失败")
}
},
windowEventOver: (iWndIndex)=> { //鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: (iWndIndex)=> { //鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: (iWndIndex)=> { //鼠标mouseup事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: (bFull)=> { //全屏切换回调
console.log('fullScreen callback: ', bFull);
},
firstFrameDisplay: (iWndIndex, iWidth, iHeight)=> { //首帧显示回调
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
},
performanceLack: ()=> { //性能不足回调
console.log('performanceLack callback: ');
},
StreamEnd: (index)=> { //回放结束回调,返回对应测窗口id
this.option.index=index;
this.play(this.option);
}
});
},
/* 分屏 */
arrangeWindow(splitNum) {
// let splitNum = this.splitNum 1
this.player.JS_ArrangeWindow(splitNum).then(
() => {
console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
},
e => { console.error(e) }
);
},
selectWindow(index){
this.player.JS_SelectWnd(index).then(
() => { },
e => { console.error(e) }
);
},
/* 整体全屏 */
wholeFullScreen(boolean) {
this.init();
this.player.JS_FullScreenDisplay(boolean).then(
() => { console.log(`wholeFullScreen success`) },
e => { console.error(e) }
);
},
/* 单窗口全屏 */
singleFullScreen(index) {
this.player.JS_FullScreenSingle(index).then(
() => {
console.info('JS_FullScreenSingle success');
// do you want...
},
(err) => {
console.info(err);
// do you want...
}
);
},
/* 预览&对讲 */
realplay() {
let { player, mode, urls } = this,
index = player.currentWindowIndex,
playURL = urls.realplay;
player.JS_Play(playURL, { playURL, mode }, index).then(
() => { console.log('realplay success') },
e => { console.error(e) }
);
},
/* 停止播放 */
stopPlay(index) {
console.log("当前选中要暂停的视频是：" + index );
this.player.JS_Stop(index).then(
() => { this.playback.rate = 0; console.log('stop realplay success') },
e => { console.error(e) }
);
},
/* 开始对讲 */
talkStart(url) {
console.log(url);
// let url = this.urls.talk
this.player.JS_SetConnectTimeOut(0, 1000);
this.player.JS_StartTalk(url).then(
() => { console.log('talkStart success') },
e => { console.error(e) }
);
},
/* 停止对讲 */
talkStop() {
this.player.JS_StopTalk().then(
() => { console.log('talkStop success') },
e => { console.error(e) }
);
},
/* 停止所有播放 */
stopAllPlay() {
this.player.JS_StopRealPlayAll().then(
() => { this.playback.rate = 0; console.log('stopAllPlay success') },
e => { console.error(e) }
);
},
/* 回放 */
playbackStart() {
let { player, mode, urls, playback } = this,
index = player.currentWindowIndex,
playURL = urls.playback,
{ startTime, endTime } = playback
startTime += 'Z'
endTime += 'Z'
player.JS_Play(playURL, { playURL, mode }, index, startTime, endTime).then(
() => {
console.log('playbackStart success')
this.playback.rate = 1
},
e => { console.error(e) }
);
},
/* 暂停回放 */
playbackPause() {
this.player.JS_Pause().then(
() => { console.log('playbackPause success') },
e => { console.error(e) }
)
},
/* 恢复回放 */
playbackResume() {
this.player.JS_Resume().then(
() => { console.log('playbackResume success') },
e => { console.error(e) }
)
},
/* 回放定位 */
seekTo() {
let { seekStart, endTime } = this.playback
seekStart += 'Z'
endTime += 'Z'
this.player.JS_Seek(this.player.currentWindowIndex, seekStart, endTime).then(
() => { console.log('seekTo success') },
e => { console.error(e) }
)
},
/* 回放慢放 */
playbackSlow() {
this.player.JS_Slow().then(
rate => {
this.playback.rate = rate
},
e => { console.error(e) }
)
},
/* 回放快放 */
playbackFast() {
this.player.JS_Fast().then(
rate => {
this.playback.rate = rate
},
e => { console.error(e) }
)
},
/* 回放单帧进（高级模式功能） */
frameForward() {
this.player.JS_FrameForward(this.player.currentWindowIndex).then(
() => { this.playback.rate = 1; console.log('frameForward success') },
e => { console.error(e) }
)
},
/* 开启声音 */
openSound(index) {
this.player.JS_OpenSound(index).then(
() => {
console.log('openSound success')
this.muted = false
},
e => { console.error(e) }
)
},
/* 关闭声音 */
closeSound(index) {
this.player.JS_CloseSound(index).then(
() => {
console.log('closeSound success')
this.muted = true
},
e => { console.error(e) }
)
},
/* 设置音量 */
setVolume(value) {
let player = this.player,
index = player.currentWindowIndex
this.player.JS_SetVolume(index, value).then(
() => {
console.log('setVolume success', value)
},
e => { console.error(e) }
)
},
/* 抓图 */
capture(imageType) {
let player = this.player,
index = player.currentWindowIndex
player.JS_CapturePicture(index, 'img', imageType).then(
() => { console.log('capture success', imageType) },
e => { console.error(e) }
)
},
/* 录像 */
recordStart(type) {
const codeMap = { MP4: 5, PS: 2 }
let player = this.player,
index = player.currentWindowIndex,
fileName = `${moment().format('YYYYMMDDHHmm')}.mp4`
typeCode = codeMap[type]
player.JS_StartSaveEx(index, fileName, typeCode).then(
() => { console.log('record start ...') },
e => { console.error(e) }
)
},
/* 停止录像并保存文件 */
recordStop() {
let player = this.player
index = player.currentWindowIndex
player.JS_StopSave(index).then(
() => { console.log('record stoped, saving ...') },
e => { console.error(e) }
)
},
/* 电子放大、智能信息 */
enlarge() {
let player = this.player,
index = player.currentWindowIndex
player.JS_EnableZoom(index).then(
() => { console.log('enlarge start..., select range...') },
e => { console.error(e) }
)
},
enlargeClose() {
let player = this.player,
index = player.currentWindowIndex
player.JS_DisableZoom(index).then(
() => { console.log('enlargeClose success') },
e => { console.error(e) }
)
},
/* 开启/关闭智能信息展示（高级模式功能） */
intellectTrigger(openFlag) {
let player = this.player,
index = player.currentWindowIndex
let result = player.JS_RenderALLPrivateData(index,openFlag)
console.log(`${openFlag ? 'open' : 'close'} intellect ${result === 1 ? 'success': 'failed'}`)
},
/* 获取音视频信息 */
getvideoInfo() {
let player = this.player,
index = player.currentWindowIndex
player.JS_GetVideoInfo(index).then(function (videoInfo) {
console.log("videoInfo:", videoInfo);
});
},
/* 获取OSD时间 */
getOSDTime() {
let player = this.player,
index = player.currentWindowIndex
player.JS_GetOSDTime(index).then(function(time) {
console.log("osdTime:", new Date(time));
});
},
getCurrentIndex(){
return this.player.currentWindowIndex;
}
},
}
</script>
<style>
</style>
（注：图片可以在阿里图标库查找）
randomLenNum这个自己新建一个js放进去就好了
/**
* 生成随机len位数字
*/
export const randomLenNum = (len, date) => {
let random = '';
random = Math.ceil(Math.random() * 100000000000000).toString().substr(0, len ? len : 4);
if (date) random = random + Date.now();
return random;
};效果图：
里面播放的内容就不展示了，大致效果就是这个样子了
