107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<template>
|
||
<div id="player"></div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import api from '@/axios'
|
||
import { Ref, ref, watch, onMounted, onBeforeMount, onBeforeUnmount, reactive, getCurrentInstance } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
const router = useRouter()
|
||
const infoData = ref()
|
||
var curIndex = 0 // 当前窗口下标
|
||
let myPlugin: any
|
||
onMounted(() => {
|
||
if (typeof window.JSPlugin === 'undefined') {
|
||
return
|
||
} else {
|
||
}
|
||
let date = {
|
||
pointId: router.currentRoute.value.query.pointId,
|
||
useTLS: 0,
|
||
}
|
||
if (process.env.NODE_ENV === 'production') {
|
||
date.useTLS = 1
|
||
}
|
||
|
||
api.post('/multialarm/video/preview', { ...date }).then((res) => {
|
||
// console.log('router222', res)
|
||
console.log('播放地址', res.data.videoUrl)
|
||
var code = res['code']
|
||
if (code == 0) {
|
||
var playURL = res.data.videoUrl
|
||
// var playURL = 'wss://w.hnjinglian.cn:2563/haikang play/openUrl/w64vRni'
|
||
var IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
|
||
var MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
|
||
myPlugin = new window.JSPlugin({
|
||
// 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
|
||
// iWidth: 600,
|
||
// iHeight: 400,
|
||
szId: 'player', //需要英文字母开头，唯一性，必填
|
||
szBasePath: './', // 必填,与h5player.min.js的引用目录一致
|
||
iMaxSplit: 1, // 分屏播放，默认最大分屏4*4
|
||
iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
|
||
openDebug: true,
|
||
oStyle: {
|
||
borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
|
||
},
|
||
bSupporDoubleClickFull: true, //是否支持双击全屏，默认true
|
||
})
|
||
myPlugin
|
||
.JS_SetWindowControlCallback({
|
||
pluginErrorHandler: function (index: any, iErrorCode: any, oError: any) {},
|
||
})
|
||
.then((res: any) => {})
|
||
|
||
var controlIndex = 2
|
||
function playVideo() {
|
||
myPlugin
|
||
.JS_Play(
|
||
playURL,
|
||
{
|
||
playURL: playURL, // 流媒体播放时必传
|
||
mode: 1, // 解码类型：0=普通模式; 1=高级模式 默认为0
|
||
},
|
||
curIndex //当前窗口下标
|
||
)
|
||
.then(
|
||
() => {},
|
||
(e: any) => {
|
||
// console.log('网络流中断')
|
||
controlIndex--
|
||
if (controlIndex <= 0) {
|
||
return
|
||
}
|
||
// console.info('JS_Play failed:', e)
|
||
playVideo()
|
||
}
|
||
)
|
||
}
|
||
playVideo()
|
||
} else {
|
||
alert('播放失败')
|
||
}
|
||
})
|
||
})
|
||
|
||
// 停止播放断开 ws 连接
|
||
onBeforeUnmount(() => {
|
||
myPlugin.JS_Stop(curIndex).then(
|
||
() => {
|
||
console.info('JS_Stop success')
|
||
// do you want...
|
||
},
|
||
(err: any) => {
|
||
console.info('JS_Stop failed:', err)
|
||
// do you want...
|
||
}
|
||
)
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
#player {
|
||
height: 100%;
|
||
width: 100%;
|
||
background: #000;
|
||
}
|
||
</style>
|