Vue中使用H5Stream实现实时视频、视频回放功能

　　因公司业务需求，需要对接H5Stream实现视频流，记录过程如下：

 参考资料：https://gitee.com/linkingvision/h5sweb/tree/master  H5视频平台|Web

　　　　　chrome-extension://ibllepbpahcoppkjjllbabhnigcbffpi/https://linkingvision.cn/download/documentation/h5stream/H5S%E8%A7%86%E9%A2%91%E5%B9%B3%E5%8F%B0API%E6%89%8B%E5%86%8C-zh.pdf   API手册

其中，vue项目中使用到的 h5splayer.js 、 h5splayerhelper.js 这两个文件，请在 https://gitee.com/linkingvision/h5sweb/tree/master/src/assets/js 文件夹中获取，可下载后放入到项目的 assets/js/文件夹下。

待实现功能如下图：

实时视频功能核心代码：

if (this.v1 != undefined){
        this.v1.disconnect();
        delete this.v1;
        this.v1  = undefined;
      }
      let conf1 = {
        videoid: "pbplayarch",
        protocol: 'http:', //http: or https:
        host: "XXX.XX.XXX.XX:8080", //localhost:8080
        rootpath:'/‘，
        token: '718f',
        hlsver:'v1', //v1 is for ts, v2 is for fmp4
        session: 'XXXXXX-XXXX-XXXX-XXXX-XXXXXXXX',
      }    
this.$nextTick(() => {
        this.v1 = new H5sPlayerRTC(conf1);
        this.v1.connect();
    })

注意：

conf1 中的 protocol，赋值时不可缺少：，否则会报错如下：

视频回放功能核心代码如下：（因加密端关系，只提供截图以供参考）

 

OK，功能实现完成，需要注意的是conf中协议的赋值--：--冒号不可少，也可以使用window.location.protocol来代替。
PS：爱情如果说最伤人，不是她不爱你，或者你不爱他。而是望着，却不可以拥抱；想着，却不可以拥有；说着，却不可以对望，还要面对一天一天的淡忘。