|
|
|
@ -2,7 +2,7 @@
|
|
|
|
|
海康H5Player
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div id='player' style="width:800px;height:600px;z-index:9999"></div>
|
|
|
|
|
<div id="player" style="width: 800px; height: 600px; z-index: 9999"></div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
|
|
|
|
@ -18,7 +18,7 @@ import { message } from 'ant-design-vue'
|
|
|
|
|
index: {
|
|
|
|
|
type: Number,
|
|
|
|
|
default: 0,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
@ -30,35 +30,37 @@ import { message } from 'ant-design-vue'
|
|
|
|
|
urls: {
|
|
|
|
|
realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
|
|
|
|
|
talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
|
|
|
|
|
playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
|
|
|
|
|
playback:
|
|
|
|
|
'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
|
|
|
|
|
},
|
|
|
|
|
playback: {
|
|
|
|
|
startTime: '2021-07-26T00:00:00',
|
|
|
|
|
endTime: '2021-07-26T23:59:59',
|
|
|
|
|
valueFormat: '',
|
|
|
|
|
seekStart: '2021-07-26T12:00:00',
|
|
|
|
|
rate: ''
|
|
|
|
|
rate: '',
|
|
|
|
|
},
|
|
|
|
|
muted: true,
|
|
|
|
|
volume: 50,
|
|
|
|
|
volumeOnSvg: {
|
|
|
|
|
template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
|
|
|
|
|
template:
|
|
|
|
|
'<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>',
|
|
|
|
|
},
|
|
|
|
|
volumeOffSvg: {
|
|
|
|
|
template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
|
|
|
|
|
template:
|
|
|
|
|
'<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>',
|
|
|
|
|
},
|
|
|
|
|
recordStartState: 0,
|
|
|
|
|
recordStartText: '录像'
|
|
|
|
|
recordStartText: '录像',
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created(){
|
|
|
|
|
},
|
|
|
|
|
created() {},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.init()
|
|
|
|
|
this.createPlayer()
|
|
|
|
|
this.arrangeWindow()
|
|
|
|
|
//videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放,index根据选中的个数
|
|
|
|
|
this.realplay(this.videoUrl,0);
|
|
|
|
|
this.realplay(this.videoUrl, 0)
|
|
|
|
|
//this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
@ -67,11 +69,13 @@ import { message } from 'ant-design-vue'
|
|
|
|
|
handler(newVal, oldVal) {
|
|
|
|
|
console.log('oldVal:', oldVal)
|
|
|
|
|
console.log('newVal:', newVal)
|
|
|
|
|
//this.realplay(newVal,0);
|
|
|
|
|
if (newVal) {
|
|
|
|
|
this.realplay(newVal, 0)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 立即处理 进入页面就触发
|
|
|
|
|
immediate: true
|
|
|
|
|
}
|
|
|
|
|
immediate: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 海康视频初始化加载
|
|
|
|
@ -86,47 +90,64 @@ import { message } from 'ant-design-vue'
|
|
|
|
|
this.player = new window.JSPlugin({
|
|
|
|
|
//szId: 'player'+this.index,
|
|
|
|
|
szId: 'player',
|
|
|
|
|
szBasePath: "/util/", //引入静态资源地址,我这里静态资源在public/js文件存放,所以设置为js
|
|
|
|
|
szBasePath: '/util/', //引入静态资源地址,我这里静态资源在public/js文件存放,所以设置为js
|
|
|
|
|
iMaxSplit: 4,
|
|
|
|
|
iCurrentSplit: 4,
|
|
|
|
|
openDebug: true,
|
|
|
|
|
oStyle: {
|
|
|
|
|
borderSelect: '#FFCC00',
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
// 事件回调绑定
|
|
|
|
|
this.player.JS_SetWindowControlCallback({
|
|
|
|
|
windowEventSelect: function (iWndIndex) { //插件选中窗口回调
|
|
|
|
|
console.log('windowSelect callback: ', iWndIndex);
|
|
|
|
|
windowEventSelect: function (iWndIndex) {
|
|
|
|
|
//插件选中窗口回调
|
|
|
|
|
console.log('windowSelect callback: ', iWndIndex)
|
|
|
|
|
},
|
|
|
|
|
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调
|
|
|
|
|
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
|
|
|
|
|
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
|
|
|
|
|
//插件错误回调
|
|
|
|
|
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
|
|
|
|
|
},
|
|
|
|
|
windowEventOver: function (iWndIndex) { //鼠标移过回调
|
|
|
|
|
windowEventOver: function (iWndIndex) {
|
|
|
|
|
//鼠标移过回调
|
|
|
|
|
//console.log(iWndIndex);
|
|
|
|
|
},
|
|
|
|
|
windowEventOut: function (iWndIndex) { //鼠标移出回调
|
|
|
|
|
windowEventOut: function (iWndIndex) {
|
|
|
|
|
//鼠标移出回调
|
|
|
|
|
//console.log(iWndIndex);
|
|
|
|
|
},
|
|
|
|
|
windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调
|
|
|
|
|
windowEventUp: function (iWndIndex) {
|
|
|
|
|
//鼠标mouseup事件回调
|
|
|
|
|
//console.log(iWndIndex);
|
|
|
|
|
},
|
|
|
|
|
windowFullCcreenChange: function (bFull) { //全屏切换回调
|
|
|
|
|
console.log('fullScreen callback: ', bFull);
|
|
|
|
|
windowFullCcreenChange: function (bFull) {
|
|
|
|
|
//全屏切换回调
|
|
|
|
|
console.log('fullScreen callback: ', bFull)
|
|
|
|
|
},
|
|
|
|
|
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调
|
|
|
|
|
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
|
|
|
|
|
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
|
|
|
|
|
//首帧显示回调
|
|
|
|
|
console.log(
|
|
|
|
|
'firstFrame loaded callback: ',
|
|
|
|
|
iWndIndex,
|
|
|
|
|
iWidth,
|
|
|
|
|
iHeight
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
performanceLack: function () { //性能不足回调
|
|
|
|
|
console.log('performanceLack callback: ');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
performanceLack: function () {
|
|
|
|
|
//性能不足回调
|
|
|
|
|
console.log('performanceLack callback: ')
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
arrangeWindow() {
|
|
|
|
|
const splitNum = this.splitNum
|
|
|
|
|
this.player.JS_ArrangeWindow(splitNum).then(
|
|
|
|
|
() => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
|
|
|
|
|
e => { console.error(e) }
|
|
|
|
|
() => {
|
|
|
|
|
console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
|
|
|
|
|
},
|
|
|
|
|
(e) => {
|
|
|
|
|
console.error(e)
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
// 初始化结束
|
|
|
|
@ -136,14 +157,14 @@ import { message } from 'ant-design-vue'
|
|
|
|
|
const { player, mode, urls } = this,
|
|
|
|
|
index = player.currentWindowIndex
|
|
|
|
|
// playURL = this.realplay
|
|
|
|
|
|
|
|
|
|
console.log('视频播放地址', playURL)
|
|
|
|
|
player.JS_Play(playURL, { playURL, mode }, index1).then(
|
|
|
|
|
() => {
|
|
|
|
|
console.log('realplay success')
|
|
|
|
|
},
|
|
|
|
|
e => {
|
|
|
|
|
console.error(e);
|
|
|
|
|
message.error('请联系视频提供方!')
|
|
|
|
|
(e) => {
|
|
|
|
|
console.error(e)
|
|
|
|
|
// message.error('请联系视频提供方!')
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
@ -155,7 +176,9 @@ import { message } from 'ant-design-vue'
|
|
|
|
|
console.log('stopAllPlay success')
|
|
|
|
|
this.closeVideoTree()
|
|
|
|
|
},
|
|
|
|
|
e => { console.error(e) }
|
|
|
|
|
(e) => {
|
|
|
|
|
console.error(e)
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
// 关闭单个视频
|
|
|
|
@ -168,10 +191,16 @@ import { message } from 'ant-design-vue'
|
|
|
|
|
const index = this.player.currentWindowIndex
|
|
|
|
|
this.selectAisle(this.videoList[index], index)
|
|
|
|
|
},
|
|
|
|
|
e => { console.error(e) }
|
|
|
|
|
(e) => {
|
|
|
|
|
console.error(e)
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
beforeUnmount() {
|
|
|
|
|
console.log('关闭所有视频')
|
|
|
|
|
this.stopAllPlay()
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less">
|
|
|
|
|