安防摄像头网页无插件直播流媒体服务器EasyNVR在IE浏览器下的 pointer-events- none前端兼容性调试

背景说明

由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合是大势所趋。传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都需要OCX Web插件进行直播。对于安防监控的视频直播需求,根据不同的业务需求,对视频直播需求也不尽相同。针对这样的行业大环境背景,立足于开源社区的EasyDarwin团队推出了EasyNVR、EasyDSS等系列产品。而对于安防监控的视频直播需求,对延时要求都比较高。

EasyNVR1 (3).png

IE浏览器下的pointer-events- none问题

在我们调试EasyNVR的web页面过程中,力求的都是一个播放效果的、功能的展示。对于兼容性也有注意,但有些细小的部分还是难免有所疏忽。内部测试发现:由于我们是流媒体的实时视频直播,在web的直播页面中,我们都是屏蔽、删除播放器的暂停按钮、功能的。我们的web页面播放rtmp、hls使用的是videojs,因此,我们需要通过设置css属性来完成这个需求。

发现问题

  • 屏蔽单机页面暂停
   .video-js .vjs-tech {
        pointer-events: none;
    }

这个属性设置 很好的在chrome中完成了需求。但是在IE中似乎就没有能够完成自己应有的任务了。

  • 隐藏暂停、开始按钮
   .vjs-progress-control,.vjs-remaining-time-display{
       visibility: hidden;
   }
   .video-js .vjs-play-control.vjs-playing {
      visibility: hidden;
   }

还可以将他的样式也一并的隐藏起来。

16.png

但是,在IE浏览器下,这些属性好像并没有起到作用。

17.png

当我们单击播放器时,依然会出现暂停的情况。

分析问题

遇到这个问题,我们研发人员首要排查的,就是查看是否videojs对于ie浏览器的不兼容。从结果来看,虽然问题是出现在videojs的播放器上面,但是罪魁祸首并不是它。

让我们完成需求的操作其实是“pointer-events: none;”这个CSS属性的设置;于是我对这个属性进行了小小的了解。

pointer-events: none
元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。

18.png

也就是说,这个属性的IE还没有很好的支持。

解决问题

我们需要从其他地方入手,解决这个问题。

我们在js中动态的设置:

 $(".vjs-tech").prop("disabled",true);

.prop是设置对象的属性。
abled的属性为false,就是设置为可用可编辑的意思;
disabled的属性为true,就是设置为不可用、不可编辑的意思。

依然可以达到需求的效果:

19.png

Image placeholder
forakinte
未设置
  33人点赞

没有讨论,发表一下自己的看法吧

推荐文章
安防摄像头RTSP/Onvif协议网页无插件直播视频流媒体服务器EasyNVR之按需直播如何有效利用最大上行带宽

介绍一般情况下,直播默认的播放方式是非按需直播,但很多情况下,不少用户会选择按需直播。按需直播能够减少带宽流量和服务器性能占用,最优的提高服务器的使用效率。下面我们来系统介绍下EasyNVR中按需直播

RTSP、RTMP网络摄像头互联网无插件直播视频流媒体服务器EasyNVR在windows上无法启动问题排查

背景需求随着雪亮工程、明厨亮灶、手机看店、智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网、微信直播,我们知道摄像头直播的春天了。将安防摄像头或NVR上的视频流转成互联网直播常用的RTSP、RTM

RTSP网络摄像头/海康大华硬盘录像机网页无插件直播方案EasyNVR如何实现RTMP/FLV/HLS/RTSP直播流分发

背景需求对于摄像机直播,客户反馈的最多就是实现web直播、摆脱插件,可以自定义集成等问题。我们熟悉的EasyNVR已经完美的解决了这些问题。然而对于web播放也存在一些问题,通常我们web播放RTMP

Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR中直播页面和视频列表页面的区别介绍

背景分析随着平安城市、智慧城市、雪亮工程、智能交通等各项建设的持续开展,安防逐渐得到普及,面对如此广阔的市场,对安防企业来说不仅仅是机遇更多的是挑战。现今大多数摄像头一直没能摆脱人工监控的传统监控方式

Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR如何使用Excel将通道配置简单化?

进入移动互联网时代以来,企业微信公众号已成为除官网以外非常重要的宣传渠道,当3.2亿直播用户与9亿微信用户的势能累加,在微信上开启直播已成为越来越多企业的必然选择。EasyNVR核心在于摄像机的音视频

Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR登陆用户名密码失效问题解决方案

背景分析随着互联网基础设施建设的发展,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看、可控的诉求越来越多,互联网思维、架构和技术引入进传统监控行业里,成为新形势下全终端监控的基础需

RTSP-ONVIF协议安防视频监控流媒体服务解决方案EasyNVR在Windows重启时提示“进程意外终止”问题解析

什么是ONVIFOpenNetworkVideoInterfaceForum,开放型网络视频接口论坛,以公开、开放的原则共同制定开放性行业标准。是一个提供开放网络视频接口的论坛组织。ONVIF规范描述

视频流媒体服务器对接宇视摄像机OCX插件出现error code 14001错误分析

背景需求随着雪亮工程、明厨亮灶、手机看店、智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网、微信直播,我们知道摄像头直播的春天了。将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP、HTT

jquery不兼容低版本ie浏览器怎么办?

jquery不兼容低版本ie浏览器怎么办?1、可以使用原生JS或者低版本的Jquery1.x版本。因为Jquery从2.x版本开始已经不再进行IE低版本(IE6、IE7、IE8)的兼容性处理。如果需要

Ubuntu 中使用 Nginx+rtmp 搭建流媒体直播服务.md

一、背景本篇文章是继上一篇文章《Ubuntu中使用Nginx+rtmp模块搭建流媒体视频点播服务》文章而写,在上一篇文章中我们搭建了一个点播服务器,在此基础上我们再搭建一个直播服务器,二、配置rtmp

css不同浏览器兼容性问题怎么解决?

css不同浏览器兼容性问题的解决方案1.浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同,所以最简单有效的方式就是对其进行初始化,相信很多朋友都写过这样的代码,在所有CSS开始前,先把ma

jquery如何判断是否是ie浏览器?

jquery如何判断是否是ie浏览器?在写页面的时候,会遇到浏览器兼容问题,在这个浏览器中可以使用,但在其他浏览器中却不能很好的显示。以下就是判断浏览器的方法,从而更好的区分代码,使得页面正常浏览。f

IE浏览器页面显示不全怎么办?

快速修复浏览器方案(鉴于系统环境不同→请活学活用以下方法→根据具体情况决定做哪些)1、打开浏览器,点“工具”→“管理加载项”那里禁用所有可疑插件,或者你能准确知道没问题的保留。然后→工具→INTERN

CentOS7 下使用 rsync+sersync 配置文件自动同步

为什么需要文件自动同步功能? 我们平时上传代码,可以通过ftp、sftp等将文件上传至服务器,耗时耗力,而且很容易出错。如果服务器数量少还好,一但服务器数量增加,压力可想而知。 这个时候我们可以使用各

“小应用”背后的“大改变” 爱奇艺赋能流媒体播放服务

热门视频里,“弹幕盖脸”几乎是必然事件,然而有一个地方看视频,你会发现密密麻麻的弹幕都绕开主角飘过,这个地方就是爱奇艺。对于大家观看视频时喜闻乐见的弹幕,爱奇艺提供了蒙版弹幕服务,可以让用户实现“弹幕

Rust 标准库中的 async/await (async-std)

Rust对齐标准库中的async/await(async-std)简介现在的rust生态中,async/await在rust1.39中已经stable,其他库还有futures已经到0.3.x,还有就

vue前端UI框架有哪些?

Vue移动端UI框架1、Vux(star:15620)VUX(读音[v’ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。暂未适配vue-cli@3

css属性兼容性详解

盒模型属性【宽高width/height】(全兼容)widthheight(IE6-不支持)min-widthmax-widthmin-heightmax-height【内边距padding】padd

兼容性常规检测

引子碰到检查支持font-family的疑问,一时想不出,查了资料后解惑。顺便在此对是否支持的检测方式,进行一些基本的归纳。 Origin MyGitHub HTML检测浏览器并不会对HTML进行编译

hover在css中有什么用?

hover在css中有什么用?以下是我总结出的hover在css中的作用,供各位参考:修改鼠标悬浮时a标签的颜色使用hover实现悬浮显示二维码仿html元素的title属性效果给网页增加动效,如鼠标

谷歌云重磅推出混合云平台Anthos,兼容竞争对手云服务 | Google Cloud Next’19

大数据文摘出品作者:蒋宝尚、周素云当地时间4月9日,谷歌云年度盛会GoogleCloud Next’19在旧金山的Moscone召开。在会上,谷歌云的新任CEO,曾经的甲骨文二号人物ThomasKur

MacOS 下的 Laravel 调试软件 - Tinkerwell

Tinkerwell是Macos下的一款用于调试的应用,支持本地调试和远程调试。 目前功能比较简单,包括: 基本界面设置-主题、字体、大小、侧边栏等 是否实时运行(仅本地可用) 是否启用Vim映射 设

全球“黑客大赛”冠军霸气讲述:我是如何让50个文件一起骗过AI安防系统的?

大数据文摘出品来源:medium编译:邢畅、张睿毅、钱天培你有没有想过当黑客呢?破解手机密码,黑入公司系统,甚至…控制全球电脑。打住打住!违法犯罪的念头显然不能有。再退一步讲,咱也不一定有这本事。尤其

助力平安城市 新华三安防监控解决方案解读

大家应该都有看过警匪片,在影视片段中警察通过视频监控能够对城市的各个角落进行全局监控,并对犯罪分子进行实时追踪。为城市治安防控以及案件侦破提供了极大便利。而在现实生活中,视频监控系统也的确有着非常重要

AI+安防 聊一聊云从科技与华为的那些事儿

“尺有所短,寸有所长,物有所不足,智有所不明,数有所不逮,神有所不通。”任何的人或事物都有其长处和短处,如何做到取长补短,是每一个企业都应该关注的问题。  如今,人工智能再次爆发。这一次,不仅在技术上