视频上云/安防视频融合平台/安防视频云服务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 }
]"
修正之后的界面显示如下图:
- WordPress REST API 内容注入漏洞分析
- 如何为Kerberos环境的CDH集群在线扩容数据节点
- WinDbg 漏洞分析调试(一)
- MySQL MVCC(多版本控制)
- 如何在集群外节点跨网段向HDFS写数据
- 如何使用HAProxy实现Kerberos环境下的Impala负载均衡
- Hue中使用Oozie创建Shell工作流在脚本中切换不同用户
- Python学习(七):模块 优雅的封装
- 非Kerberos环境下Kafka数据到Flume进Hive表
- 6.如何为Hue配置OpenLDAP认证
- Socket 通信原理
- PHP 面试知识梳理
- 5.如何为Impala配置OpenLDAP认证
- 传统Spring项目使用FeignClient组件访问微服务
- 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 数组属性和方法
- JavaEE中为删除数据操作与退出操作添加确认提示框
- JavaWeb中的实现页面跳转的同卵双胞胎兄弟——重定向与请求转发
- JavaWeb中的异卵双胞胎——监听器与过滤器
- JavaEE中的el 表达式以及JSTL详解
- 基于Jsp和Servlet的简单项目
- 基于Servlet实现的简单登陆练习
- JavaScript初识
- 聊聊dubbo-go的DubboInvoker
- 如何在云开发Cloudbase中使用MySQL数据库
- Kubernetes笔记之基本概念
- 腾讯云语音识别之一句话识别
- 创建线程都有哪些方式?— Callable篇
- UiAutomator源码学习(3)-- UiObject
- RTSP协议视频流媒体播放器EasyPlayer-RTSP-OCX接口文档API接口函数定义
- Python逐行写入