vue2集成海康威视h5player插件，播放ws开头格式的视频流

一、下载h5Player官网demo

demo地址：https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20

二、集成

将demo同目录的文件放到项目资源目录下：

注意：必须是demo同级的资源文件！！！，不要使用bin目录下的，因为有的版本可能会出现资源找不到的问题！！！

1、demo文件图片：

2、项目文件图片：

3、在index.html中引用

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

4、封转一个子组件，供其他模块使用

<template>
    <div id="play_window"></div>
</template>
<script>

export default {
    name: 'hkvideo',
    data() {
        return {
            myPlugin: null
        }
    },
    methods: {
         initH5Player(split) {
            this.myPlugin = new window.JSPlugin({
                szId: 'play_window', //需要英文字母开头，唯一性，必填
                szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
                bSupporDoubleClickFull: true,//是否支持双击全屏，默认true
                openDebug: true,
                oStyle: {
                    borderSelect: '#000',
                },
                // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
                // iWidth: 200,
                // iHeight: 200,
                // 分屏播放，默认最大分屏4*4
                iMaxSplit: split,
                iCurrentSplit: split,
            })


            // 事件回调绑定
            this.myPlugin.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: ');
                }
            });
        },

        play(url, index) {
            this.myPlugin.JS_Play(url,
                {
                    playURL: url, // 流媒体播放时必传
                    mode: 0, // 解码类型：0=普通模式; 1=高级模式 默认为0
                    // ...
                },
                index, //当前窗口下标
            ).then(
                () => {
                    console.info('JS_Play success');
                    // do you want...
                },
                (err) => {
                    console.info('JS_Play failed:', err);
                    // do you want...
                }
            );
        }

    },
}
</script>

5、父组件调用

<h5player ref="h5player"></h5player>

import h5player from '封转的组件地址'

  components: {
    h5player
    },

  mounted() {
    setTimeout(() => {
      this.$refs.h5player.initH5Player(2)
      this.$refs.h5player.play('视频地址',0)
    }, 200);
   
  },

至此，视频已经可以完成播放！