rtsp转rtmp、hls网页直播服务器EasyNVR前端兼容性调试: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;
}
还可以将他的样式也一并的隐藏起来。
但是,在IE浏览器下,这些属性好像并没有起到作用。
当我们单击播放器时,依然会出现暂停的情况。
分析问题:
我的第一想法是,是否是videojs对于ie浏览器的不兼容。才结果来看, 我在这个方面做了很多的无用功。虽然问题是出现在videojs的播放器上面,但是罪魁祸首不是它。
让我们完成需求的操作其实是“pointer-events: none;”这个CSS属性的设置;于是我对这个属性进行了小小的了解。
pointer-events: none
元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
也就是说,这个属性的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/
获取更多信息
Copyright © EasyDarwin.org 2012-2017
rtsp转rtmp、hls网页直播服务器EasyNVR前端兼容性调试:ie下的 pointer-events- none的更多相关文章
- 内网网络摄像机(RTSP/IPC/NVR)如何能在公网进行RTMP/HLS/HTTP-FLV直播
一.背景需求 传统监控行业里不管是设备端.服务器端亦或是客户端都在一个内网里面.而且现在的大部分监控方案都是这样的格局,小到一个公司范围内的监控,再到一个园区.一个仓库监控.一个农业园林监控.一个养殖 ...
- RTMP HLS HTTP 直播协议一次看个够
直播从2016年一路火到了2017年,如今要在自己的App里加入直播功能,只要找一个现成的SDK就行了,什么拍摄.美颜.推流,一条龙服务.不过作为直播身后最重要的部分:推流协议,很多人并不是很清楚.如 ...
- EasyDSS流媒体解决方案实现的RTMP/HLS视频直播、直播鉴权(如何完美将EasyDSS过渡到新版)
上一篇博文介绍了EasyDSS点播功能,然后作为RTMP流媒体服务器,接受RTMP推流.进行实时的直播流分发又是自身一大核心功能. 需求背景: 写本篇博文的一个目的是向大家介绍一下EasyDSS新版的 ...
- Centos7 搭建Nginx+rtmp+hls直播推流服务器
1 准备工具 使用yum安装git [root~]# yum -y install git 下载nginx-rtmp-module,官方github地址 // 通过git clone 的方式下载到服务 ...
- EasyNVR无插件播放HLS/RTMP网页直播方案前端完善:监听表单变动
在上一篇博客中我们表述完了防止提交成功后多余操作提交的一个过程:其中的精髓在于ajax的触发事件的使用. 而这篇博客主要想说明一下如何实时的判断出表单是否发生变化. 问题表述: 在网页前端的开发过程中 ...
- EasyNVR RTSP摄像机转HLS直播服务器中使用Onvif协议控制预置位
EasyNVR支持预置位控制,包括转到指定预置位,设置指定预置位,删除指定预置位 预置位在安防领域有较为普遍的应用,可以进行很多既定位置的跳转,很方便 之前我们说过如何用Onvif协议进行设备的发现, ...
- EasyNVR RTSP摄像机HLS直播服务器中使用Onvif协议获取设备快照
我们知道EasyNVR中可以获取快照信息,之前的文章也说明了EasyNVR是如何进行快照抓取的 这里我们使用另一种方法进行快照的抓取 流程 获取设备能力Capabilities 获取设备的能力,并且可 ...
- EasyDSS流媒体服务器灵活地帮助用户实现摄像机RTSP转RTMP直播功能
简要描述 今天突然接到国内某上市公司同事打来的技术咨询电话,经过简单的沟通,大概所描述的需求是: 1.目前现场有非常多的摄像机资源需要接入: 2.需要将摄像机的RTSP流转成RTMP流接入到微信小程序 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:如何播放HLS(m3u8)直播流
背景描述 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文 ...
随机推荐
- 八、Ubuntu安装Tomcat和jdk
1.解压Tomcat 和 jdk tar -zxvf apache-tomcat-8.0.28.tar.gz tar -zxvf jdk-8u60-linux-x64.gz 2.将解压后的tomcat ...
- Django之model F/Q以及多对多操作
model之F/Q操作 F操作,使用查询条件的值 打个比方吧,有一张表,保存着公司员工的工资,公司普涨工资,如何在model中操作,这就用到了F,首先需要导入此模块: from django.db.m ...
- C# ASP.NET中Process.Start没有反应也没有报错的解决方法
最近有一个很坑的需求,在ASP.NET中打开一个access,还要用process.start打开,调试时一切正常,到了发布后就没有反应,找了一下午,各种设文件夹权限也不行,最后把应用程序池改成管理员 ...
- (7)JavaScript-BOM(浏览器对象模 型)
window 对象 全局作用域 在浏览器中, window 对象有双重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象. 所有在 ...
- SQLite的Pragma语句
SQLite的Pragma语句 Pragma语句是SQLite提供的特有语句.该语句可以查询SQLite的非表数据,还可以修改SQLite的库.在iOS开发中,利用Pragma语句,可以实现很多非 ...
- group by与distinct效率分析及优化措施
如何使用group by进行去重 因为mysql的distinct在结果集中,全部不同,才可以去重.所以,当我们进行去重处理的时候,需要单独对某列进行去重,可以使用group by子句进行分组去重se ...
- sqld360
https://mauro-pagano.com/2017/04/15/sql-monitoring-flamegraph-and-execution-plan-temperature-2-0/ ht ...
- 数据挖掘-MovieLens数据集_电影推荐_亲和性分析_Aprioro算法
#!/usr/bin/env python2 # -*- coding: utf-8 -*- """ Created on Tue Feb 7 14:38:33 201 ...
- c 数组做为形參时 该參数退化为指针
当数组做为函数的形參的时候,该參数退化为指针,而且是无法直接求得数组的大小. 传数组给一个函数.数组类型自己主动转换为指针类型,因而传的实际是地址. void func(int array[10]) ...
- /etc/shadow 密码加密方法
[root@mysql-master ~]# cat /etc/shadowroot:$6$spzQDWctb8Lmju0o$KoUz5Qwv1tWyVYfd5cuBw.TQVIaCvCX8ixGG9 ...