萤石云创建两次EZUIKit出现监控画面只显示一个

页面实现多分屏时,需要打开多个视频监控,在使用的时候出现令人烧脑的一件事情

在很多次测试之下终于发现问题所在EZUIKit默认这个页面最先出现的那个播放窗口是放视频的地方,不管你有几个地址都是一样,他不会出现在各自的的div里面,于是乎,问题就出现了该咋办才能让EZUIKit播放呢????

在网上找了许多文章:
比如说:在要出现监控的页面使用iframe,引用上面的那个创建出来的页面

https://blog.csdn.net/qq_42877655/article/details/113674976

但是这个方法太麻烦了,于是我便试着去查找他的js。因为所提供的demo里面是有类似案例的,只不过它的地址是采用拼接的方式,只需要创建一个div,自动根据拼接的url创建多个小div在大的div下面,而我是多个同级div,用来实现分屏效果。

案例:https://open.ys7.com/mobile/download.html

提供的代码示例:

生成的效果:

我的效果:第一个视频是有的,第二个视频没有得到播放地址,可能是他指向了第一个吧。

于是乎我找了ezuikit.js文件找到了这个获取真实播放地址的位置,经过调试后发现,我的第二个div并没有获取到真实播放地址。于是我便找到了生成。playWindow+id的地方,他的地址是拼接的,每个地址都有一个下标,根据下标生成的playWindow,而我的url只有一个地址,但是我的每个div都有ID,只要我的id跟playWindow+id一样,那么我也能获取到这个地址

结果我还真就获取到了这个地址

获取到真实播放地址之后那就是播放了。但是播放的时候有出错了。还是一样的问题。

改完之后就能够正常运行了

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
Vue.js和萤石云监控可以通过以下步骤实现全屏功能。 首先,在Vue.js的组件中,需要引入萤石云监控的SDK,以便能够与监控设备进行交互。可以通过在`<head>`标签中引入SDK的链接,或者使用NPM包管理工具进行安装。 接下来,在Vue.js的组件中,创建一个DOM元素,用于显示监控画面。可以使用`<div>`或者`<canvas>`等标签来创建DOM元素。 然后,在Vue.js的`mounted`生命周期钩子函数中,实例化萤石云监控SDK,并将SDK的实例与之前创建的DOM元素进行绑定,以便能够将监控画面显示在这个DOM元素中。 在绑定完成后,可以通过调用SDK实例的方法,来加载监控设备的视频流,并将视频流显示在之前创建的DOM元素中。 最后,实现全屏功能可以通过在Vue.js的组件中添加一个按钮或者其他的交互元素,并在点击事件中调用浏览器的全屏API来实现。可以通过`document.documentElement.requestFullscreen()`或者`element.requestFullscreen()`方法来进入全屏模式,其中`element`是之前创建的DOM元素。 需要注意的是,在进入全屏模式时,需要浏览器的支持,不同的浏览器可能有不同的API调用方式。在调用全屏API之前,最好先进行一些兼容性检测,以确保在不同浏览器上都能正常运行。 以上就是使用Vue.js和萤石云监控实现全屏功能的基本步骤。具体的实现细节还需要根据具体的项目情况来调整和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悸初~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值