前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >EasyCVR视频广场视频播放时,因浏览器窗口变化导致视频画面变形该如何解决?

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

原创
作者头像
TSINGSEE青犀视频
修改2022-11-18 15:20:20
4970
修改2022-11-18 15:20:20
举报
文章被收录于专栏:TSINGSEE青犀视频

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档