EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs初始化的一些样式处理
初始化完成对videojs样式的调整
由于不同项目的需要,对于加载出来的videojs播放器样式也有不同的需求;我们需要自主的处理一下加载出来的videojs播放器的样式;
默认加载出来的会包含有暂停按钮、音量调节按钮、时间进度条、时间显示和全屏显示按钮等:
问题:
如果我们进行播放的视频是直播视频,时间进度条和时间显示在播放器样式上就显得有点多余;可以通过自主更改属性去除这些样式;
解决:
通过浏览器找到对应的属性名称,将对应属性的值通过CSS设置为隐藏属性:
.vjs-progress-control,.vjs-remaining-time-display{
visibility: hidden;
}
关于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

EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs初始化的一些样式处理的更多相关文章
- EasyNVR H5无插件摄像机直播解决方案前端解析之:监控实时直播的四分屏的前端展示
完成运行效果图: 一.四分屏展示样式布局 1.通过html.css等来进行样式排版 根据需求的四分屏的样式:来合理的划分出四个大块,分别用于放置四个播放器: 以四等分结构为例进行前端的排版: html ...
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs的使用
video.js的基本使用方法 一.videojs的初始化加载 videojs初始化加载分为两中 1.标签式加载 在引入videojs加载文件的前提下,可以在video标签中添加属性值"da ...
- EasyNVR H5无插件摄像机直播解决方案前端解析之:如何在播放界面添加实时云台控制界面
如何在播放器上加一个云台控制界面 问题: 对于实时直播的视频播放, 由于播放页面客观样式要求(一个播放器占据了整个页面),因此很难找出很合理的空间来放置其他功能按钮的位置(比如配合实时是平的云台控制界 ...
- EasyNVR H5无插件摄像机直播解决方案前端解析之:关于直播页面和视频列表页面切换的问题
关于直播页面和视频列表页面切换 为了给用户更好的用户体验,并且更好的让用户快速简洁的了解实时的视频直播信息.一般多会分为列表展示和实时的视频直播展示. 表面上只是两个视图之间的随意切换,其实切换的两个 ...
- EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放
关于videojs自动播放问题 播放流媒体多使用videojs来进行播放,videojs,本身自带自动播放属性: 通过添加autoplay(),来完成视频播放的自动加载: player = video ...
- EasyNVR H5无插件RTSP直播方案在Windows server 2012上修复无法定位GetNumaNodeProcessorMaskEx的问题
今天遇到一个客户在使用EasyNVR无插件安防直播解决方案的时候,在Windows Server 2012上出现一个问题提示: 经过反复的查找,虽然提示上显示问题出在KERNEL32.dll上,但是已 ...
- 基于EasyDarwin框架实现EasyNVR H5无插件直播流媒体服务器方案
在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服务器方案架 ...
- 基于EasyDarwin开源流媒体服务器框架实现EasyNVR H5无插件直播流媒体服务器方案
背景分析 在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服 ...
- 基于EasyNVR摄像机无插件直播方案二次开发实现自己的摄像机IPC-NVR无插件化直播解决方案
背景介绍 在之前的博客中<基于EasyNVR实现RTSP/Onvif监控摄像头Web无插件化直播监控>,对EasyNVR所实现的功能我们已经有较多描述,这些也在方案地址:http://ww ...
随机推荐
- mysql中文乱码的解决方法
MySQL的字符集支持(Character Set Support)有两个方面: 字符集(Character set)和排序方式(Collation).对于字符集的支持细化到四个层次: 服务器(ser ...
- react-transition-group v2 用法概述
官方文档地址:https://reactcommunity.org/react-transition-group/ 在react-transition-group v2中,暴露了三个组件: Trans ...
- linux定时问题
手动运行java脚本,可以,但定时运行没效果 查看脚本是否赋予执行权限:若无则赋予可执行权限,若还是没用,则在脚本增添环境变量,百度搜索.
- 在typescript中import第三方类库clipboard报错
一.问题 在实际开发项目中就遇到了这样的问题,需要在Vue+Typescript项目中添加复制文本的功能,就找了clipboard插件,先是新建了一个新的项目用来实验看看是否好用,都写好了以后发给别人 ...
- luogu P2423 双塔
题目描述 2001年9月11日,一场突发的灾难将纽约世界贸易中心大厦夷为平地,Mr. F曾亲眼目睹了这次灾难.为了纪念“911”事件,Mr. F决定自己用水晶来搭建一座双塔.Mr. F有N块水晶,每块 ...
- XCode删除多余的Simulator(模拟器)
每个xocde都会自带一个模拟器,且都是随安装包一起打包的,比如xcode8.0的就自带iOS10的模拟器,这个是没办法删除. 但是对于想要用iOS10以前的模拟器,可以通过这里进行下载: 最终下载的 ...
- c++ 幕客网
http://m.imooc.com/course/list.html?c=cplusplus http://coding.imooc.com/ http://www.imooc.com/act/al ...
- Android Gradle 经验总结
用过android studio的对gradle应该都不陌生了,gradle文件的基本配置大同小异,略做了解使用应该是没什么问题了.但是深入细致的了解一下对于理解项目还是很有帮助的,尤其是遇到一些配置 ...
- 真正解决 thinkphp 验证码 出错 无法显示 问题
今天做到验证码这一块想到tp自带验证图片 大喜单鼓捣半天不出来 一直是个小 X 官方提示:如果无法显示验证码,请检查:² PHP是否已经安装GD库支持:²输出之前是否有任何的输出(尤其是UTF8的B ...
- mysql忘记密码的解决办法
mysql忘记密码时,需要重设密码. 在Windows下的操作如下: 1.关闭正在运行的MySQL. 2.打开DOS窗口,转到mysql\bin目录. 3.输入mysqld --skip-grant- ...