EasyNVR H5无插件直播方案前端架构之：videojs的使用

videojs的使用

一、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/