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 ...
随机推荐
- FZU 1056 扫雷游戏【搜索】
Accept: 2584 Submit: 6790Time Limit: 1000 mSec Memory Limit : 32768 KB Problem Description 扫雷是 ...
- Goodbye 2017 B
[题意]: 鲍勃编程一个机器人在2d迷宫中导航.迷宫有一些障碍.空单元格用'.'表示,其中障碍物用'#'表示.迷宫中有一个机器人.它的起始位置用字符“S”表示.这个位置没有任何障碍.迷宫中也有一个出口 ...
- 详解Swift和OC的混编
前言: 我们在一些情况下,仅仅使用swift 是无法完成一个项目的,在swift项目中必要用到 OC 实现一些功能,比如,项目要使用一些第三方的框架,但这个第三方的框架却是用 OC 实现的,或者你的项 ...
- SCP和SFTP相同点和区别
都是使用SSH协议来传输文件的.不用说文件内容,就是登录时的用户信息都是经过SSH加密后才传输的,所以说SCP和SFTP实现了安全的文件传输. SCP和CP命令相似,SFTP和FTP的使用方法也类似. ...
- centos 编译 安装php
安装phpcd /usr/local/srctar -zvxf php-5.3.10.tar.gzcd php-5.3.10mkdir -p /usr/local/php5 #建立php安装目录. ...
- JS: document.getElementBy(), setInerval()
ylbtech-JavaScript-DOM document.getElementBy(),setInerval() 1.A,document.getElementBy()返回顶部 document ...
- Linux学习之十八-sudo分权管理
sudo分权管理 1.为什么需要sudo? 当我的主机是多人共管的环境时,如果大家都使用 su 来切换成为 root 的身份,那么就得每个人知道 root 的密码,这样密码太多人知道可能会流出去,很不 ...
- 2017.2.12 开涛shiro教程-第八章-拦截器机制
原博客地址:http://jinnianshilongnian.iteye.com/blog/2018398 根据下载的pdf学习. 1.拦截器介绍 下图是shiro拦截器的基础类图: 1.Namea ...
- IntelliJ IDEA 识别一个类所属的jar包package
IntelliJ IDEA 识别一个类所属的jar包package 按住ctrl,鼠标移动上去,不要点击: 有木有快捷键? ctrl+alt+B直接就过去了:需要再跳回来:
- 线程间操作无效: 从不是创建控件“XXX”的线程访问它
方法1 Invoke((MethodInvoker)(()=>{XXX.Text = message;})); 方法2 取消跨线程检查 Control.CheckForIllegalCrossT ...