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/

获取更多信息

邮件:support@easydarwin.org

WEB:www.EasyDarwin.org

Copyright © EasyDarwin.org 2012-2017

EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs的使用的更多相关文章

  1. EasyNVR H5无插件摄像机直播解决方案前端解析之:监控实时直播的四分屏的前端展示

    完成运行效果图: 一.四分屏展示样式布局 1.通过html.css等来进行样式排版 根据需求的四分屏的样式:来合理的划分出四个大块,分别用于放置四个播放器: 以四等分结构为例进行前端的排版: html ...

  2. EasyNVR H5无插件摄像机直播解决方案前端解析之:如何在播放界面添加实时云台控制界面

    如何在播放器上加一个云台控制界面 问题: 对于实时直播的视频播放, 由于播放页面客观样式要求(一个播放器占据了整个页面),因此很难找出很合理的空间来放置其他功能按钮的位置(比如配合实时是平的云台控制界 ...

  3. EasyNVR H5无插件摄像机直播解决方案前端解析之:关于直播页面和视频列表页面切换的问题

    关于直播页面和视频列表页面切换 为了给用户更好的用户体验,并且更好的让用户快速简洁的了解实时的视频直播信息.一般多会分为列表展示和实时的视频直播展示. 表面上只是两个视图之间的随意切换,其实切换的两个 ...

  4. EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放

    关于videojs自动播放问题 播放流媒体多使用videojs来进行播放,videojs,本身自带自动播放属性: 通过添加autoplay(),来完成视频播放的自动加载: player = video ...

  5. EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs初始化的一些样式处理

    初始化完成对videojs样式的调整 由于不同项目的需要,对于加载出来的videojs播放器样式也有不同的需求:我们需要自主的处理一下加载出来的videojs播放器的样式: 默认加载出来的会包含有暂停 ...

  6. EasyNVR H5无插件RTSP直播方案在Windows server 2012上修复无法定位GetNumaNodeProcessorMaskEx的问题

    今天遇到一个客户在使用EasyNVR无插件安防直播解决方案的时候,在Windows Server 2012上出现一个问题提示: 经过反复的查找,虽然提示上显示问题出在KERNEL32.dll上,但是已 ...

  7. 基于EasyDarwin框架实现EasyNVR H5无插件直播流媒体服务器方案

    在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服务器方案架 ...

  8. 基于EasyDarwin开源流媒体服务器框架实现EasyNVR H5无插件直播流媒体服务器方案

    背景分析 在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服 ...

  9. 基于EasyNVR摄像机无插件直播方案二次开发实现自己的摄像机IPC-NVR无插件化直播解决方案

    背景介绍 在之前的博客中<基于EasyNVR实现RTSP/Onvif监控摄像头Web无插件化直播监控>,对EasyNVR所实现的功能我们已经有较多描述,这些也在方案地址:http://ww ...

随机推荐

  1. android 集成友盟分享之后,想自定义分享面板的看过来

    第一种情况 首先上传一张默认的友盟分享的效果图 看起来还不错,但是总是有这样那样的原因,需要我们对默认效果做出一些改变. 第二种情况 如果你想做出下面的效果: 或者这样的效果 : 总之上面的效果总是在 ...

  2. (11)centos之vim使用

    ZZ 保存并退出 :x 保存并退出 :q 不保存退出

  3. POJ3086 Treats for the Cows(区间DP)

    题目链接  Treats for the Cows 直接区间DP就好了,用记忆化搜索是很方便的. #include <cstdio> #include <cstring> #i ...

  4. jersey上传文件解决办法

    这两天在使用jersey 构建的jersey JAX-RS REST服务器,在通过POST方法上传文件的时候,如果根据example来操作的话会引发如下异常: SEVERE: Missing depe ...

  5. 主机屋 ubuntu 14安装nginx

    http://www.cnblogs.com/piscesLoveCc/p/5794926.html 安装gcc g++的依赖库 1 sudo apt-get install build-essent ...

  6. ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock'

    原因:找不到mysql.sock文件 解决方法: 1 找到mysql.sock文件位置 echo "show variables" | mysql | grep "soc ...

  7. Checkbox Text 重影问题的解决的方法

    Checkbox有个属性值 <CheckBox android:id="@+id/cb_reg_agree" style="@style/reg_checkbox_ ...

  8. Ajax学习(一)——与Ajax的初次相识

        AJAX是"Asynchronous Javascript And XML"的缩写,从字面上解释是"异步JavaScript和XML"的简称. 它不是一 ...

  9. MySQL的备份与恢复具体解释

    MySQL数据备份 在mySQL里面,有逻辑备份和物理备份.逻辑备份最大长处是对于各种存储引擎,都能够使用相同的方法来备份. 而物理备份则不同.不同的存储引擎有着不同的备份方法. 逻辑备份与恢复 备份 ...

  10. OCP-1Z0-051-题目解析-第16题

    16. Evaluate the following query: SQL> SELECT promo_name q'{'s start date was }' promo_begin_date ...