Vue集成海康威视h5视频播放器

1、进入海康威视官网下载开发包

海康开放平台

2、将js文件放到public目录下

3、在public/index.html页面中引入

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

4、创建组件页面 

<template>
  <div
    :class="['player', playerType == 'error' ? 'black' : '']"
    :style="{ width: videoWidth, height: videoHeight }"
  >
    <div class="error" v-if="playerType == 'error'">视频播放异常</div>
    <div id="play_window" v-else style="width: 100%;height: 100%;"></div>
  </div>
</template>

  <script>
export default {
  props: {
    //视频地址、video的id值
    videoUrl: {
      type: String,
      default: "",
    },
    //视频宽度
    videoWidth: {
      type: String,
      default: "100%",
    },
    //视频高度
    videoHeight: {
      type: String,
      default: "100%",
    },
    videoList: {
      type: Array,
      default: null,
    }
  },
  data() {
    return {
      playerType: "",
    };
  },
  watch: {
    //监听视频地址、video的id值
    videoUrl: {
      deep: true,
      immediate: true,
      handler(val) {
        this.$nextTick(() => {
          if (this.videoUrl) {
            this.getVideo(this.videoUrl);
          }
        });
      },
    },
    videoList: {
      deep: true,
      immediate: true,
      handler(val) {
        if (this.videoList && this.videoList.length > 0) {
          this.$nextTick(() => {
            this.getSplitVideo()
          });
        }
      },
    },
  },
  methods: {
    getVideo(videoUrl) {
      let curIndex = 0;
      let myPlugin = new JSPlugin({
        szBasePath: "/powerOperationControl/static/",
        szId: 'play_window',
        iWidth: 600, 
        iMaxSplit: 4,
        oStyle: {
          border: "#343434",
          borderSelect: "#FFCC00",
          background: "#000",
        },
      });
      myPlugin.JS_Play(videoUrl, { playURL: videoUrl, mode: 1 }, curIndex).then(
        () => {
          console.log("realplay success");
        },
        (e) => {
          this.playerType = 'error';
        }
      );
    },
    getSplitVideo() {
      let iMaxSplit = 1;
      let num = this.videoList.length
      if (num == 1) {
        iMaxSplit = 1;
      } else if (num > 1 && num <= 4) {
        iMaxSplit = 2
      } else if (num > 4 && num <= 9) {
        iMaxSplit = 3
      } else if (num > 9 && num <= 16) {
        iMaxSplit = 4
      }
      let myPlugin = new JSPlugin({
        szBasePath: "/powerOperationControl/static/",
        szId: 'play_window',
        iWidth: 600, // iHeight: 400, // 分屏播放，默认最大分屏4*4
        iMaxSplit: iMaxSplit, // iCurrentSplit: 1,
        iCurrentSplit: 1,
        oStyle: {
          border: "#343434",
          borderSelect: "#FFCC00",
          background: "#000",
        },
      });
      myPlugin.JS_ArrangeWindow(iMaxSplit).then( () => { 
        this.videoList.forEach((item, index) => {
          myPlugin.JS_Play(item.url, { playURL: item.url, mode: 1 }, index).then(
            () => {
              console.log("realplay success");
            },
            (e) => {
              console.log("realplay error");
            }
          );
        }) 
      },(err) => { 
        console.info('JS_ArrangeWindow failed'); 
      } 
);
    }
  },
};
</script>

<style lang="scss">
.player {
  .error {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #cccccc;
    background: #000;
    .parent-wnd {
      display: none;
    }
  }
}
.black {
  background: #000;
}

</style>

5、组件使用

该组件集成了web视频的两种播放方式，预览和分屏播放。参数说明如下

videoUrl：视频地址，如：ws://10.128.89.14:559/openUrl/T2jl5qo

videoWidth和videoHeight：用于定义视频容器的宽高

videoList：多个videoUrl的集合，分屏播放时使用

• 预览

<VideoByHaiKang :videoUrl="videoUrl"></VideoByHaiKang>

• 分屏播放

<VideoByHaiKang :videoList="videoList"></VideoByHaiKang>