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-dialogtitle="查看":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插件播放，按照网上测试了很多方法，包括单独下了插件进行配置，都没有解决问题。然后过了一会儿再打开页面，问题就消失了？！也是比较神奇

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

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

vue 中使用百度cyberplayer播放器遇到的坑
####上次用了百度cyberplayer播放器也做了一些介绍,在使用的过程中遇到了一些问题.播放器和vue都有一点写法的问题 1.频繁点击视频进入播放页面后再返回首页,会出现上个视频的音频和当前视屏 ...
去掉h5播放器中voide标签中的下载按钮
去掉H5播放器中voide标签中的下载按钮,参考代码: <video width="320" height="240" controls> & ...
熊猫TV直播H5播放器架构探索
本文来自熊猫TV音视频技术专家姜雨晴在LiveVideoStackCon 2017上的分享,并有LiveVideoStack整理成文.当下,打造一款播放器已经有比较好的开源实现,但熊猫TV为什么还要自 ...
酷播云H5播放器与JS之间交互的实例
酷播云H5播放器与JS之间交互的实例 <!doctype html> <html> <head> <meta charset="utf-8" ...
免费视频直播、点播H5播放器SkeyeWebPlayer播放常见问题
免费视频直播.点播H5播放器SkeyeWebPlayer使用常见问题 1.用常见问题--配置iframe允许自动播放和全屏 SkeyeWebPlayer播放器在PC上正常情况下单击播放器的全屏按钮是可 ...
SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能（二）
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
免费视频直播、点播H5播放器SkeyeWebPlayer 结合百度地图sdk实现电子地图播放功能
免费视频直播.点播H5播放器SkeyeWebPlayer 结合vue-baidu-map百度地图组件实现电子地图播放功能,最终效果如图所示: SkeyeWebPlayer播放器如何在vue-baidu ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
flash和H5播放器
flash和H5 flash播放器缺点是需要在客户机安装Adobe Flash Player播放器,优点是flflash播放器已经很成熟了,并且浏览器对flflash支持也很好. H5播放器基于 ...
一个简洁的高自定义的H5播放器
问题:移动端的某些展示页面,经常遇到需要嵌入一个短视频的情况(其实还是某程序媛遇到的情况),通常这个视频上只有一个自定义的播放或者暂停按钮,样式简洁,如下图: 为了完成上述需求,写了一个非常简洁的H5 ...

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

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

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

最新文章

热门文章