EasyCVR视频广场视频播放时,因浏览器窗口变化导致视频画面变形该如何解决?

EasyCVR视频融合平台部署轻快、功能灵活,可支持多协议、多类型设备接入,平台基于云边端一体化架构,可在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理。在视频能力上,可实现视频直播、录像、回放、检索、云存储、告警上报、以及平台级联等。

EasyCVR视频广场视频播放时,因浏览器窗口变化导致视频画面变形该如何解决?插图

有用户反馈,EasyCVR视频广场播放视频时,因浏览器窗口发生变化,导致播放器播放的视频画面变形。

EasyCVR视频广场视频播放时,因浏览器窗口变化导致视频画面变形该如何解决?插图1

EasyCVR视频广场视频播放时,因浏览器窗口变化导致视频画面变形该如何解决?插图2

如上图对比可见,视频画面出现了严重的变形情况。我们也立刻对此情况进行了排查与解决。

1)增加js监听时间:window.addEventListener(“resize”, function(){});

2)查看正常视频播放时的比例,在宽度发生变化时,根据比例计算出其宽度,并修改该元素的宽度,从而完成视频根据窗口自适应大小;

3)在当前页面销毁时,移除当前的监听,避免此监听影响其他页面。

移除监听的方法:window.removeEventListener(“resize”, function(){});

参考代码如下:

EasyCVR视频广场视频播放时,因浏览器窗口变化导致视频画面变形该如何解决?插图3

修改后样式如下,视频画面已经恢复了正常比例:

EasyCVR视频广场视频播放时,因浏览器窗口变化导致视频画面变形该如何解决?插图4

EasyCVR平台支持设备通过国标GB28181、RTMP、RTSP/Onvif、海康SDK、大华SDK、Ehome等协议接入,对外可分发RTSP、RTMP、FLV、HLS、WebRTC等格式的视频流。为了便于用户集成与调用,我们也提供了丰富的API接口供用户使用,有需要的用户可以查看我们的官方API接口文档。

EasyCVR视频广场视频播放时,因浏览器窗口变化导致视频画面变形该如何解决?插图5

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

文章来源于互联网:EasyCVR视频广场视频播放时,因浏览器窗口变化导致视频画面变形该如何解决?

THE END
分享
二维码