rtsp转rtmp、hls网页直播服务器EasyNVR前端兼容性调试：ie下的 pointer-events- none

时间 2019-11-13

标签 rtsp rtmp hls 网页直播服务器 easynvr 前端兼容性调试 pointer events 栏目 HTML 繁體版

原文原文链接

发现问题：

以前在作EasyNVR 的web页面开发过程当中，力求的都是一个播放效果的、功能的展现。对于兼容性也有注意，但有些细节仍是不免有所疏忽。css

内部测试发现：因为咱们是流媒体的实时视频直播，在web的直播页面中，咱们都是屏蔽、删除播放器的暂停按钮、功能的。咱们的web页面播放rtmp、hls使用的是videojs。他是一个开源的播放器，网上也有相关的文档。web

基于需求，结合现实，学习手册，落实开发，咱们经过设置css属性来完成这个需求：chrome

屏蔽单机页面暂停

.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;
   }

还能够将他的样式也一并的隐藏起来。ruby

可是，在IE浏览器下，这些属性好像并无起到做用。网络

当咱们单击播放器时，依然会出现暂停的状况。ide

分析问题：

个人第一想法是，是不是videojs对于ie浏览器的不兼容。才结果来看，我在这个方面作了不少的无用功。虽然问题是出如今videojs的播放器上面，可是罪魁祸首不是它。学习

让咱们完成需求的操做实际上是“pointer-events: none;”这个CSS属性的设置；因而我对这个属性进行了小小的了解。测试

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

也就是说，这个属性的IE尚未很好的支持；

解决问题：

我是咱们就须要找个其余方式，来解决这个问题，来完成咱们的需求；

咱们在js中动态的设置：

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

后面.prop是设置对象的属性。
后面两个参数是设置：disabled的属性为false，就是设置为可用可编辑的意思;
disabled的属性为true，就是设置为不可用、不可编辑的意思。

依然能够达到需求的效果:

关于EasyNVR

EasyNVR可以经过简单的网络摄像机通道配置，将传统监控行业里面的高清网络摄像机IP Camera、NVR等具备RTSP协议输出的设备接入到EasyNVR，EasyNVR可以将这些视频源的音视频数据进行拉取，转换为RTMP/HLS，进行全平台终端H5直播（Web、Android、iOS），而且EasyNVR可以将视频源的直播数据对接到第三方CDN网络，实现互联网级别的直播分发；

详细说明：http://www.easydarwin.org/easynvr/

获取更多信息

邮件：support@easydarwin.org

WEB：www.EasyDarwin.org