hi-ucs/front/src/views/home/components/H5Player.vue

167 lines
6.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
海康H5Player
-->
<template>
<div id='player' style="width:800px;height:600px;z-index:9999"></div>
</template>
<script>
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
export default {
name: 'H5Player',
props: {
videoUrl:{
type: String,
default: '',
},
index:{
type: Number,
default: 0,
}
},
data() {
return {
player: null,
splitNum: 1,
mseSupport: MSE_IS_SUPPORT,
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
tabActive: 'decoder',
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: {
startTime: '2021-07-26T00:00:00',
endTime: '2021-07-26T23:59:59',
valueFormat: '',
seekStart: '2021-07-26T12:00:00',
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>'
},
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>'
},
recordStartState: 0,
recordStartText: '录像'
}
},
created(){
},
mounted() {
this.init()
this.createPlayer()
this.arrangeWindow()
//videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放index根据选中的个数
this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
},
methods: {
// 海康视频初始化加载
init () {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
},
createPlayer () {
//console.log('this.index',this.index);
this.player = new window.JSPlugin({
//szId: 'player'+this.index,
szId: 'player',
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);
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
},
windowEventOver: function (iWndIndex) { //鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) { //鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) { //全屏切换回调
console.log('fullScreen callback: ', bFull);
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
},
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) }
)
},
// 初始化结束
// 视频预览
realplay (playURL, index1) {
this.mode = 1 //解码方式0普通模式 1高级模式
const { player, mode, urls } = this,
index = player.currentWindowIndex
// playURL = this.realplay
player.JS_Play(playURL, { playURL, mode }, index1).then(
() => {
console.log('realplay success')
},
e => { console.error(e) }
)
},
// 关闭所有视频
stopAllPlay () {
this.player.JS_StopRealPlayAll().then(
() => {
this.playback.rate = 0
console.log('stopAllPlay success')
this.closeVideoTree()
},
e => { console.error(e) }
)
},
// 关闭单个视频
stopPlay () {
this.player.JS_Stop().then(
() => {
this.playback.rate = 0
console.log('stop realplay success')
// this.closeVideoTree()
const index = this.player.currentWindowIndex
this.selectAisle(this.videoList[index], index)
},
e => { console.error(e) }
)
},
},
}
</script>
<style lang="less">
.tiled-map {
position: relative;
width: 100%;
height: 100%;
}
</style>