Vue中调用LiverPlayer H5播放器实现萤石云视频监控

Posted Yi_qian1000

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中调用LiverPlayer H5播放器实现萤石云视频监控相关的知识,希望对你有一定的参考价值。

1,首先,要播放实时监控的视频肯定需要获取播放地址

萤石云官网:https://open.ys7.com/help/30

 官方文档上获取直播地址有两个接口 (新)(旧) 这里采用新接口

2,接下来看接口文档上的参数,能看到必传的参数是accessToken 和 deviceSerial,然后获取到这两个参数调用接口能获取到播放的地址,后面的参数是控制视频显示,按需引入

3,在调用接口的时候会出现跨域,所以需要先解决跨域,这里就直接使用了jquery,因为jquery已经配置好了省事儿     比较懒  这样就能获取到直播地址了

(记得检查拿取到的地址是否是rtmp格式)

   getChannelUrl(data) 
      let param = 
        deviceSerial: this.ruleFormBottom.equipmentNumber,
        protocol: 4,
        accessToken: data.accessToken,
        channelNo: data.channelNo,
      ;
      $.ajax(
        url: `https://open.ys7.com/api/lapp/v2/live/address/get`,
        method: "POST",
        headers: 
          "Content-Type": "application/x-www-form-urlencoded",
        ,
        data: param,
      ).done((res) => 
         console.log(res)
      );
    ,

拿取地址之后就需要在页面进行播放

播放当然需要用到一个播放器

这里采用的是LiverPlayer H5播放器 

文档:https://www.liveqing.com/docs/manuals/LivePlayer.html

根据你的版本对应相关进行配置

 1,找到根目录分别进行配置,记得在index.html页面加上

2,在需要播放视频的组件中引入 注册 ,这里是一个单独的弹出组件采用的el-dialog  最后将获取到的直播地址赋值给videoUrl即可

<template>
  <el-dialog
    title="查看"
    :visible.sync="dialogVisible"
    width="50%"
    height="40"
    :before-close="handleClose"
    :modal-append-to-body="false"
    :append-to-body="false"
  >
    <div class="videoBox">
        <LivePlayer ref="li_test" :videoUrl="videoUrl" fluent autoplay
        :controls="false"
        />
    </div>
  </el-dialog>
</template>

<script>
import LivePlayer from "@liveqing/liveplayer";

export default 
  components: 
    LivePlayer,
  ,
  data() 
    return 
      ezvizPlay: null,

      videoUrl: "",

      dialogVisible: false,
    ;
  ,
 
  methods: 
    handleClose(done) 
      this.dialogVisible = false;
    ,
  ,
;
</script>

<style lang="less" scoped>
.videoBox 
  background: lightblue;

</style>

3,最后要是想不显示或者增加暂停 循环播放等按钮功能,播放器可以直接设置, 对照配置下参数就好 

踩坑:谷歌浏览器页面打开的时候会提示不支持flash插件播放,按照网上测试了很多方法,包括单独下了插件进行配置,都没有解决问题。然后过了一会儿再打开页面,问题就消失了?! 也是比较神奇

到现在为止一切正常,回头在测试下这个问题,看能不能找到好的解决方法。

H.265流媒体播放器EasyPlayer.js如何调用VUE?

EasyPlayer是我们推出的比较受欢迎的流媒体播放器,TSINGSEE青犀视频的平台也集成了该播放器。EasyPlayer不仅能支持H.264/H.265视频的播放,还具有多个系列版本,如EasyPlayer-RTSP、EasyPlayer.js、EasyPlayerPro等。当前EasyPlayer还含有Windows、Android、iOS三个平台的稳定运行版本,EasyPlayer.js还可支持Linux平台,用户可以根据自身的需求对其进行二次开发或自主集成。

有用户在使用EasyPlayer.js时,需要在Web页面实现关闭老视频流、再开启一个新视频的功能,但是找不到类似EasyWasmPlayer的this.player.destory()这种方法。

其实用户提及的这种方法,在我们最新版播放器里是有的。在我们的npm上有VUE调用的方法,今天就来和大家分享一下。

之前用老播放器有个document.getElementById(this.id).getVueInstance(),但是现在组件里没有getVueInstance()。我们只需要在停止播放时,参照demo里的写法,调用destroyplayer,然后再使用initplayer方法,将流地址写进去即可。

EasyPlayer开发度高、灵活性强,多个衍生版本无论是在对接设备型号种类,还是在对接编码的兼容性上,都具备较高的可用性,而且EasyPlayer上层有一套成熟的视频缓冲与追帧算法,大家大可以自行测试、自行评估。

以上是关于Vue中调用LiverPlayer H5播放器实现萤石云视频监控的主要内容,如果未能解决你的问题,请参考以下文章

利用jQuery实现h5播放器播放组件

uniapp h5、app获取经纬度、地址

vue的h5页面中使用视频播放插件

vue 做 h5 怎么实现 扫码功能?调用手机相机扫码

uni-app引入海康威视h5player实现视频监控的播放

uniapp 实现复制功能(h5)