vue使用海康的H5视频播放器开发包实时预览监控画面

使用原因

之前用海康的视频WEB插件实现过监控画面在前端页面的实时预览，但是会有两个问题：
1、该插件需要先进行安装，而且每次开机后也要重新启动该插件；
2、使用该插件很难更改其样式，只能使用其自带的窗口（1x1,2x2等），如过我要一个1x2的窗口就无法实现；
所以才产生了使用其它方法实现前端页面实时预览监控画面的想法。

两者优缺点

1、视频WEB插件
缺点：需要安装插件；样式难以更改；
优点：视频响应快，流畅性好，可以同时查看多个监控画面；
2、H5视频播放器开发包
缺点：视频流畅性查，卡顿等问题，特别是有查看多个监控画面的需求时不要用这种方法；
优点：不用安装插件；样式更改简单；

使用方法

1、下载开发包

2、将下载的开发包放入项目中
在项目中的public文件夹下新建一个h5player的文件夹（这里的文件夹名字可以自己取，后端引入时注意一下就好了），接着将刚才下载的开发包中的bin文件夹里面所有的文件都赋值到项目中的h5player文件夹下。

3、在项目中引入开发包文件
在public/index.html文件里引入

4、封装后player的demo
新增.vue文件，复制下面的代码

<template>
    <div>
      <div :id="preId" style="width: 400px; height: 200px"></div>
    </div>
  </template>
  <script>
  export default {
    name: "h5HkVideo",
    props: {
      preUrl: {
        type: String,
      },
      preId: {
        type: String,
      }
    },
    data() {
      return {
        // 播放器对象
        player: null,
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.initPlayer();
      });
    },
    methods: {
      /**
       * 初始化播放器
       */
      initPlayer() {
        this.player = new window.JSPlugin({
          // 需要英文字母开头 必填
          szId: this.preId,
          // 必填,引用H5player.min.js的js相对路径
          szBasePath: "/h5player",
   
          // // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
          // iWidth: 600,
          // iHeight: 400,
   
        //   // 分屏播放，默认最大分屏4*4
        //   iMaxSplit: 16,
        //   iCurrentSplit: 1,
   
        //   // 样式
        //   oStyle: {
        //     border: '#343434',
        //     borderSelect: '#FFCC00',
        //     background: '#000'
        //   }
        });
        this.initPlugin();
      },
      /**
       * 事件初始化
       */
      initPlugin() {
        this.player.JS_SetWindowControlCallback({
          windowEventSelect(iWindIndex) {
            // 插件选中窗口回调
            console.log("windowSelect callback: ", iWindIndex);
          },
          pluginErrorHandler(iWindIndex, iErrorCode, oError) {
            // 插件错误回调
            console.error(
              `window-${iWindIndex}, errorCode: ${iErrorCode}`,
              oError
            );
          },
          windowEventOver(iWindIndex) {
            // 鼠标移过回调
            // console.log("鼠标移过回调", iWindIndex);
          },
          windowEventOut(iWindIndex) {
            // 鼠标移出回调
            // console.log("鼠标移出回调", iWindIndex);
          },
          windowFullCcreenChange(bFull) {
            // 全屏切换回调
            console.log("全屏切换回调", bFull);
          },
          firstFrameDisplay(iWndIndex, iWidth, iHeight) {
            // 首帧显示回调
            console.log("首帧显示回调", iWndIndex, iWidth, iHeight);
          },
          performanceLack(iWndIndex) {
            // 性能不足回调
            console.log("性能不足回调", iWndIndex);
          },
        });
   
        // this.play();
      },
      /**
       * 播放
       */
      play(data) {
        let preUrl;
        if (data != undefined) {
          preUrl = data; // 播放地址
        } else {
          preUrl = this.preUrl; // 播放地址
        }
        const param = {
          playURL: preUrl,
          // 1：高级模式  0：普通模式，高级模式支持所有
          mode: 1,
        };
        // 当前播放窗口下标
        let index = 0;
        // console.log(this.playerArr);
        this.player.JS_Play(preUrl, param, index).then(
          () => {
            // 播放成功回调
            console.log("播放成功");
          },
          (err) => {
            console.log("播放失败");
            console.info("JS_Play failed:", err);
          }
        );
      },
    },
  };
  </script>复制

5、使用封装的组件

<template>
  <div class="video" ref="videoTest">
   <test-web-h-5 :preId="preId1" ref="h5Player1"></test-web-h-5>
   <test-web-h-5 :preId="preId2" ref="h5Player2"></test-web-h-5>
   <el-button type="primary" @click="handlePlay('1')">播放视频一</el-button>
   <el-button type="primary" @click="handlePlay('2')">播放视频二</el-button>
  </div>
</template>
 
<script>
import TestWebH5 from './components/testWebH5.vue'
export default {
  components: {
    TestWebH5,
  },
  data() {
    return {
      preId1: 'player',
      preId2: 'player2'
    }
  },
  methods: {
    handlePlay(val) {
      if (val === '1') {
        this.$refs.h5Player1.play("ws://视频一地址")
      } else {
        this.$refs.h5Player2.play("ws://视频二地址")
      }
    },
  },
</script>
 
<style scoped lang="scss">
.video {
  width: 100%;
  height: 100%;
}
</style>复制