vue项目使用海康H5插件

一：引入H5插件

将海康开放平台的H5插件包下载之后，引入项目，但要注意这个插件好像只支持ws的流

 选中的bin目录里的这些文件放入项目里

二：项目引入

三：使用

       
 <div
    :id="index"
    style="width: 100%; height: 100%"
>
</div>
data(){
        
return{
    player: null,
    url：'',//视频播放地址
      }
},

mounted(){
this.initPlayer()
},

methods:{
  initPlayer() {
      // console.log(this.camerasarr);
      getCameraVideoUrlByIndexCodeAPI({
        bridgeId: this.bridgeId,
      }).then((res) => {
        if (res.success) {
          res.result.forEach((item, index) => {
            this.url = item.videoUrl;
            this.player = new window.JSPlugin({
              // 需要英文字母开头 必填
              szId: index,
              // 必填,引用H5player.min.js的js相对路径
              szBasePath: "@/static",
              iCurrentSplit: Number(this.split),
              openDebug: true,
              // // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
              // iWidth: 600,
              // iHeight: 400,

              // 分屏播放，默认最大分屏4*4
              // 样式
              oStyle: {
                border: "black",
                borderSelect: "black",
              },
            });
            let _this = this;
            _this.player.JS_SetWindowControlCallback({
              windowEventSelect: function (index) {
                //插件选中窗口回调
                console.log("windowSelect callback: ", index);
              },
              pluginErrorHandler: function (index, iErrorCode, oError) {
                //插件错误回调
                console.log(
                  "pluginError callback: ",
                  index,
                  iErrorCode,
                  oError
                );
                if (_this.playWindowIndex.includes(Number(index))) {
                  let i = _this.playWindowIndex.indexof(Number(index));
                  _this.playWindowIndex.splice(i, 1);
                }
              },
              windowEventOver: function (index) {
                //鼠标移过回调
              },
              windowEventOut: function (index) {},
              windowEventUp: function (index) {
                //鼠标mouseup事件回调
              },
              windowFullCcreenChange: function (bFull) {
                //全屏切换回调
              },
              firstFrameDisplay: function (index, iWidth, iHeight) {
                //首帧显示回调
                console.log(
                  `窗口${index}加载成功，分辨率为${iWidth}*${iHeight}`
                );
                if (!_this.playWindowIndex.includes(Number(index))) {
                  _this.playWindowIndex.push(Number(index));
                }
              },
              performanceLack: function () {
                //性能不够回调
              },
            });

            this.onSubmit(index);          
          });
        }
      });
    },
    /**
     * 播放
     */
    play(windwoIndex) {
      if (this.player === null) return;
      let { mode, player } = this;
      let index = windwoIndex || player.currentWindowIndex;

      let playURL = this.url;

      console.log(playURL, { playURL, mode }, index);
      this.player.JS_Play(playURL, { playURL, mode }, index).then(
        () => {
          // 播放成功回调
          console.log("播放成功");
        },
        (err) => {
          console.log("播放失败", err);
        }
      );
    },
    /**
     * 默认预览
     */
    onSubmit(index) {
      this.play(index);
    },

}