视频上云/安防视频融合平台/安防视频云服务EasyCVR通道播放界面出现样式重叠如何修正?
时间:2022-07-25
本文章向大家介绍视频上云/安防视频融合平台/安防视频云服务EasyCVR通道播放界面出现样式重叠如何修正?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
EasyCVR是TSINGSEE青犀视频研发安防视频融合平台,设备端有公网IP,可通过海康SDK、Onvif/RTSP、GB28181、ehome协议接入到EasyCVR中;设备端无公网IP,可通过GB28181、ehome协议接入到EasyCVR中,也可在内网安装EasyNTS设备,与公网建立传输通道,这样即可通过海康SDK、Onvif/RTSP接到EasyCVR中。
近期我们的前端研发人员在优化EasyCVR播放界面时,发现播放单通道时,界面出现了样式重叠,遮挡了角落镜头,如下图:
随后研发人员重启了项目,项目在本机显示正常。然后经过排查发现只有在电脑屏幕分辨率为125%和播放H265视频的时候才会出现重叠效果。根据这个前提,我们可以进行以下修正排查:
1>监听设备是否为125%。
const state = {
pixel: window.devicePixelRatio === 1.25,
isIE: !!window.ActiveXObject || "ActiveXObject" in window,
siderlist: [],
favoriteslist: []
};
2>找到显示播放器的样式添加样式
.sereen-player-box1 {
padding-bottom: 47%;
}
.sereen-player-box2 {
padding-bottom: 44%;
}
.sereen-player-box3 {
padding-bottom: 56%;
}
3>根据监听的屏幕是为125%显示对应的样式
:class="[
{ 'sereen-player-box1': !isPlayer && aspects == 47 },
{ 'sereen-player-box2': !isPlayer && aspects == 44 },
{ 'sereen-player-box3': !isPlayer && aspects == 56 }
]"
修正之后的界面显示如下图:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何在 Node.js 中判断一个文件是否存在?
- 我参与了两个接近100k+star的开源项目!聊聊开源项目贡献指南
- 最新更新 | Kafka - 2.6.0版本发布新特性说明
- 利用Libra进行机器学习和深度学习
- I2C总线架构 之 总线驱动
- 一文讲透“布隆过滤器”
- 基于PySpark的流媒体用户流失预测
- 盘一盘 Python 特别篇 21 - 分箱之 qcut
- 挖洞经验 | 以SSRF获取Zimbra邮件服务的用户明文凭据
- Office文件追踪方案探索
- 如何全方位地给 SQL Server 做测试
- 下下下一代防火墙关键技术漫谈
- Mysql事务隔离级别
- ent orm笔记1---快速尝鲜
- UsoDllLoader:一款功能强大的武器化特权文件写入工具