EasyCVR视频广场视频播放时,因浏览器窗口变化导致视频画面变形该如何解决?
浏览器 如何 解决 视频 窗口 变化 导致 播放
2023-06-13 09:11:27 时间
EasyCVR视频融合平台部署轻快、功能灵活,可支持多协议、多类型设备接入,平台基于云边端一体化架构,可在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理。在视频能力上,可实现视频直播、录像、回放、检索、云存储、告警上报、以及平台级联等。
有用户反馈,EasyCVR视频广场播放视频时,因浏览器窗口发生变化,导致播放器播放的视频画面变形。
如上图对比可见,视频画面出现了严重的变形情况。我们也立刻对此情况进行了排查与解决。
1)增加js监听时间:window.addEventListener(“resize”, function(){});
2)查看正常视频播放时的比例,在宽度发生变化时,根据比例计算出其宽度,并修改该元素的宽度,从而完成视频根据窗口自适应大小;
3)在当前页面销毁时,移除当前的监听,避免此监听影响其他页面。
移除监听的方法:window.removeEventListener(“resize”, function(){});
参考代码如下:
修改后样式如下,视频画面已经恢复了正常比例:
EasyCVR平台支持设备通过国标GB28181、RTMP、RTSP/Onvif、海康SDK、大华SDK、Ehome等协议接入,对外可分发RTSP、RTMP、FLV、HLS、WebRTC等格式的视频流。为了便于用户集成与调用,我们也提供了丰富的API接口供用户使用,有需要的用户可以查看我们的官方API接口文档。
EasyCVR部署简单、兼容性高,在很多场景中均有落地项目应用,如智慧工地、智慧安防、智慧工厂、智慧园区等。感兴趣的用户可以前往演示平台进行体验或部署测试。
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- 《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(10)-Fiddler如何设置捕获Firefox浏览器的Https会话
- 如何让浏览器不缓存文件
- linux opera flash插件,Linux下64位的Firefox、Opera浏览器安装Flash插件
- 如何解决360浏览器被hao.360.cn主页劫持问题
- html如何设置ie6兼容性视图,IE6浏览器兼容性视图设置在哪里[通俗易懂]
- Blazor 中如何下载文件到浏览器
- 老司机必备!超强下载神器,IDM多个版本(电脑、手机、浏览器插件都有)
- 不同浏览器如何实现书签自动同步?扩展插件推荐
- 如何通过浏览器查看nginx服务器状态?
- 如何用jQuery禁用浏览器的前进后退按钮详解编程语言
- AJAX跨域问题解决方法(1)——禁止浏览器进行跨域限制详解编程语言
- js监听浏览器,关闭,刷新(兼容IE6+,Firefox,Chrome,Safari)详解编程语言
- 版本发现Linux新世界:火狐浏览器Linux版本(火狐浏览器linux)
- Edge浏览器新增迷你右键菜单 内置在线词典 优化密码监控
- [下载] 谷歌浏览器Google Chrome v83.0.4103.61正式版(稳定版)现已发布
- Let’s Encrypt 已被所有主流浏览器所信任
- 的特性Linux下浏览器的独特之处(linux下浏览器)
- 揭秘使用浏览器访问Redis(浏览器如何访问redis)
- 预告:微软漏洞贡献榜中国第一人黄正——如何用正确的姿势挖掘浏览器漏洞|硬创公开课
- PNG背景在不同浏览器下的应用
- WEB浏览器兼容推荐收藏
- VS2010、VS2008等项目的默认浏览器修改方法(图文)
- 原生js仿jq判断当前浏览器是否为ie,精确到ie6~8