vue项目接入海康威视h5player.js播放器

最近公司项目需要接入海康视频监控，先后使用了easyplayer.js(只能播放海康视频的hls视频流，加载很慢，放弃),海康自带WEB插件(需要用户安装插件且不支持mac，放弃)，最终决定使用海康H5player.js插件，使用版本V2.12，供大家参考。

1.官网下载H5视频播放器开发包

文件里有开发指南及使用说明，参考启动没有问题后，准备嵌入项目

2.把demo文件夹内容嵌入vue项目public文件夹中

3.在public/index.html中引入js静态资源

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

4.在vue中使用

<div id='player'></div>

//script
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse

//data()
// 海康视频参数
   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()
// 海康h5插件初始化
   setTimeout(function () {
     _this.init()
     _this.createPlayer()
     _this.arrangeWindow()
   })

//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',
       }
     })
     // 事件回调绑定
     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) }
       )
      }
    },

简单的视频预览、关闭视频就实现了，注意：如果视频播放不了，需要查看是否是高级模式预览视频，this.mode = 1 //解码方式：0普通模式 1高级模式
更新：插件版本升级后可以硬解，mode也可以设置为0，性能会好一些
注意：如果报错静态资源文件找不到，确认szBasePath值是否是对应静态资源地址