vue2集成海康威视h5视频播放器（H5player）开发包V2.1.2

1.下载开发包

海康开放平台 (hikvision.com)

2.将开发包bin目录下的文件放入到public目录下（我这里放在public/h5player目录下）

3.在public/index.html文件下引入

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

4.vue页面创建一个div元素

5.data中声明初播放器对象player

6.初始化播放器，事件初始化，实现播放

完整代码如下：

<template>
  <div id="rightcenter3">
    <div id="play_window" class="bg-color-black"></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      player: null
    };
  },
  mounted() {
    this.createPlayerInit()
  },
  methods: {
    // 初始化播放器
    createPlayerInit() {
      this.player = new window.JSPlugin({
        // 需要英文字母开头，必填！
        szId: "play_window", // dom元素的id
        // 引用h5player.min.js的js相对路径，必填！
        szBasePath: "../../h5player/",
        iMaxSplit: 4,
        iCurrentSplit: 1,
        oStyle: {
          border: "#343434",
          borderSelect: "#ffcc00",
          background: "#000"
        }
      })
    },

    // 获取到视频流url，播放预览视频
    loadPreviewData(url) {
      let playURL = url
      let mode = 0
      this.player.JS_Play(playURL, { playURL, mode }, 0).then(() => {
        () => {
          console.log('播放成功888')
        },
          (err) => {
            console.log('播放失败')
          }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
$box-width: 534px;
$box-height: 310px;

#rightcenter3 {
  position: relative;
  height: $box-height;
  width: $box-width;
  background-image: url('../../assets/new3Img/a10.png');
  background-size: 100% 100%;
  background-position: center center;

  .bg-color-black {
    height: 270px;
    display: flex;
    justify-content: center;
    align-items: center;

    &>img {
      width: 504px;
      height: 250px;
    }
  }
}
</style>