使用海康视频h5player@2.0版本接入vue2项目

1.组件@/components/HikVideo.vue

<template>
  <div class="hik-video">
    <div id="player" style="width: 800px;height: 550px;" />
    <i class="el-icon-error del_video" @click="closeVideo" />
    <!-- <el-button @click="realplay('ws://122.224.85.195:559/openUrl/ai8wwtW')">播放</el-button> -->
  </div>
</template>
<script>
// // 官方提供的播放工具
import '@/static/h5player.min.js'
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
export default {
  name: 'HikVideo',
  props: {
    videoUrl: {
      type: String,
      default: () => {
        return ''
      }
    },
    // 视频监控分屏数
    splitNum: {
      type: Number,
      default: () => {
        return 1
      }
    }
  },
  data() {
    return {
    // 海康视频参数
      player: null,
      // splitNum: 1,
      mseSupport: MSE_IS_SUPPORT,
      // tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
      tabActive: 'decoder',
      // urls: {
      //   realplay: 'ws://122.224.85.195:559/openUrl/XaKOh5S',
      //   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: '2022-11-16T00:00:00',
      // endTime: '2022-11-16T23:59:59',
        valueFormat: '',
        // seekStart: '2022-11-16T12: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() {
  // 海康h5插件初始化
    setTimeout(() => {
      this.init()
      this.createPlayer()
      this.arrangeWindow()
    })
  },
  mounted() {
    // console.log(this.videoUrl, 'mounted')
    if (this.videoUrl) this.realplay(this.videoUrl)
  // 页面加载初始化
  // this.initPlayer()
  },
  methods: {

    // 海康视频初始化加载
    init() {
    // 设置播放容器的宽高并监听窗口大小变化
      window.addEventListener('resize', () => {
        this.player.JS_Resize()
      })
    },
    createPlayer() {
      this.player = new window.JSPlugin({
        szId: 'player',
        szBasePath: '/js/', // 引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
        iMaxSplit: 4,
        iCurrentSplit: 2,
        openDebug: true,
        oStyle: {
          borderSelect: '#FFCC00'
        }
      })
      // console.log(this.player, '123456')
      // 事件回调绑定
      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: ')
        }
      })
      return this.player
    },
    arrangeWindow() {
      // const splitNum = this.splitNum
      // console.log(this.splitNum, '分屏')
      this.player.JS_ArrangeWindow(this.splitNum).then(
        () => { console.log(`arrangeWindow to ${this.splitNum}x${this.splitNum} success`) },
        e => { console.error(e) }
      )
    },
    // 初始化结束
    // 视频预览
    realplay(playURL, index1) {
      const player = this.createPlayer()
      this.mode = 1 // 解码方式：0普通模式 1高级模式
      // const { player, mode, urls } = this

      // const index = player.currentWindowIndex
      // playURL = this.realplay
      // console.log(player, 'player')
      player.JS_Play(playURL, { playURL, mode: this.mode }, index1).then(
        () => {
          console.log('realplay success')
        },
        e => { console.error(e) }
      )
    },
    // 关闭所有视频
    stopAllPlay() {
      const player = this.createPlayer()
      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) }
      )
    },
    // 视频关闭
    closeVideo() {
      this.stopAllPlay()
      this.$emit('changeUrl', '')
    }
  }
}
</script>
<style scoped lang="scss">
.hik-video{
  position: relative;
  .del_video{
    cursor: pointer;
    position: absolute;
    right: -2.6%;
    top: -2.9%;
    font-size: 30px;
    color: rgba(0,0,0,0.7);
  }
}
</style>

2.将官网下载的压缩包解压放置在项目pubilc/js/里面，初始化player时路径需匹配

3.index.html引入

    <script src="<%= BASE_URL %>js/h5player.min.js"></script>

压缩包下载地址：https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10