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, reactive, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const infoData = ref()
onMounted(() => {
  var data = {
    cameraIndexCode: router.currentRoute.value.query.pointId,
  }
  console.log(data)
  // ws://218.76.54.6:559/openUrl/aUPPuCy
  api.post('/multialarm/video/preview', { pointId: data.cameraIndexCode }).then((res) => {
    console.log('router222', res)
    console.log('播放地址', res.data.videoUrl)
    var code = res['code']
    if (code == 0) {
      var playURL = res.data.videoUrl
      var IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
      var MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
      var player = 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
      })

      var index = 2
      playVideo()
      function playVideo() {
        //   JS_Play 参数说明
        //   JS_Play(url, config, windowIndex, startTime, endTime)
        player
          .JS_Play(
            playURL,
            {
              playURL: playURL, // 流媒体播放时必传
              mode: 1, // 解码类型：0=普通模式; 1=高级模式 默认为0
            },
            0 //当前窗口下标
          )
          .then(
            () => {
              console.info('JS_Play success')
              // do you want...
            },
            (err: any) => {
              console.info('JS_Play failed:', err)
              playVideo()
              // do you want...
            }
            // () => {
            //   console.log('realplay success')
            // },
            // (e) => {
            //   console.log('?')
            //   index--
            //   if (index <= 0) {
            //     return
            //   }
            //   var inUrl = '192.168.10.240:559'
            //   var outUrl = '218.76.54.20:559'
            //   playURL = playURL.replace(outUrl, inUrl)
            //   playVideo()
            // }
          )
      }
    } else {
      alert('播放失败')
    }
  })
})
</script>

<style scoped lang="scss">
#player {
  height: 100%;
  width: 100%;
  background: #000;
}
</style>