EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs的使用
video.js的基本使用方法
一、videojs的初始化加载
videojs初始化加载分为两中
1.标签式加载
在引入videojs加载文件的前提下,可以在video标签中添加属性值“data-setup=’{}’”,并且在class属性中添加“video-js”;二者缺一不可;
<video class="video-js vjs-default-skin" data-setup='{}'>
“vjs-default-skin”是加载出来播放器默认样式;
2.JS加载
通过js进行加载不需要在video标签中添加“data-setup=’{}’”,可以通过js来初始化videojs;
var player = videojs('video');
如果需要加载多个播放器,可以根据标签中的id属性来进行播放器的加载。
player = videojs("player" + i, {
techOrder: ["flash"],
autoplay: true
});
效果如下:
二、videojs基本样式的调整
videojs加载成功后默认播放按钮是出现在播放器左上角的,为了让播放按钮默认居中显示可以通过给video标签添加class属性值“vjs-big-play-centered”;
<video class="video-js vjs-default-skin vjs-big-play-centered" data-setup='{}'>
效果如下:
关于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无插件摄像机直播解决方案前端解析之:如何在播放界面添加实时云台控制界面
如何在播放器上加一个云台控制界面 问题: 对于实时直播的视频播放, 由于播放页面客观样式要求(一个播放器占据了整个页面),因此很难找出很合理的空间来放置其他功能按钮的位置(比如配合实时是平的云台控制界 ...
- EasyNVR H5无插件摄像机直播解决方案前端解析之:关于直播页面和视频列表页面切换的问题
关于直播页面和视频列表页面切换 为了给用户更好的用户体验,并且更好的让用户快速简洁的了解实时的视频直播信息.一般多会分为列表展示和实时的视频直播展示. 表面上只是两个视图之间的随意切换,其实切换的两个 ...
- EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放
关于videojs自动播放问题 播放流媒体多使用videojs来进行播放,videojs,本身自带自动播放属性: 通过添加autoplay(),来完成视频播放的自动加载: player = video ...
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs初始化的一些样式处理
初始化完成对videojs样式的调整 由于不同项目的需要,对于加载出来的videojs播放器样式也有不同的需求:我们需要自主的处理一下加载出来的videojs播放器的样式: 默认加载出来的会包含有暂停 ...
- 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 ...
随机推荐
- (6)ASP.NET HttpServerUtility 类
HttpServerUtility 类 提供用于处理 Web 请求的 Helper 方法 https://msdn.microsoft.com/zh-cn/library/system.web.htt ...
- shell 实现自动备份nginx下的站点
shell 实现自动备份nginx下的站点 优点 实现自动备份ngnix下的所有运行的站点 自定义排除备份站点,支持三种排除 自动维护备份目录,防止备份目录无限扩大 备份压缩tar.gz格式 源码: ...
- JS版汉字与拼音互转终极方案,附简单的JS拼音
前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...
- ios开发 - 获取从http上下载文件的大小
- (void)connectionNSURLConnection *)connection didReceiveResponseNSURLResponse *)response{ NSHTTPURL ...
- 关于Web应用和容器的指纹收集以及自动化软件的制作
一次对Web应用的渗透,九成都是从信息收集开始,所以信息收集就显得尤为重要.关键信息的收集可以使你在后期渗透的时候更加的得心应手,把渗透比喻成走黑暗迷宫的话,那信息收集可以帮你点亮迷宫的大部分地图. ...
- matlab修改文件名和删除某类文件
matlab修改多级文件夹路径下的文件名: % %%%%%%%%%%%%%%批量修改文件名一级文件夹 \路径下直接为文件 % close all;clear all;clc; % path='G:\1 ...
- OllyDbg 使用笔记 (一)
OllyDbg 使用笔记 (一) 參考 书:<加密与解密> 视频:小甲鱼 解密系列 视频 ollydbg下载地址:http://tools.pediy.com/debuggers.htm ...
- k8s学习(二)——etcdctl工具的使用
k8s的实现核心实际上就是通过读写etcd数据库实现对资源的存储,管理和控制. k8s所有资源的本源都是存储在etcd中的一个个键值对. 理论上可以观察到etcd数据库中的数据变化.具体的使用方式如下 ...
- c语言单链表实现
/************************************************************************* > File Name: singleLin ...
- 取消sudo的密码
终端输入sudo visudo,显示为以下内容: 我们只要修改其中的一点内容,就可以实现sudo不需要输入密码了 sudo su -chmod +w /etc/sudoersvim /etc/sudo ...