zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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部署简单、兼容性高,在很多场景中均有落地项目应用,如智慧工地、智慧安防、智慧工厂、智慧园区等。感兴趣的用户可以前往演示平台进行体验或部署测试。