multiple-police-situations/src/views/page/hkplay.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') {
    console.error('JSPlugin is not loaded')
    return
  } else {
    console.log('JSPlugin加载成功')
  }
  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://www.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
      })

      console.log('myPlugin________', myPlugin)

      var controlIndex = 2
      function playVideo() {
        console.log('____________playURL:', playURL)
        console.log('____________curIndex:', curIndex)
        //   JS_Play 参数说明
        //   JS_Play(url, config, windowIndex, startTime, endTime)
        myPlugin
          .JS_Play(
            playURL,
            {
              playURL: playURL, // 流媒体播放时必传
              mode: 1, // 解码类型：0=普通模式; 1=高级模式 默认为0
            },
            curIndex //当前窗口下标
          )
          .then(
            () => {
              console.info('JS_Play success')
              // do you want...
            },
            (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>