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://·/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插件播放,按照网上测试了很多方法,包括单独下了插件进行配置,都没有解决问题。然后过了一会儿再打开页面,问题就消失了?! 也是比较神奇
到现在为止一切正常,回头在测试下这个问题,看能不能找到好的解决方法。
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #liveplayer #Vue #新旧 #和