EasyNVR H5无插件直播方案前端架构之:videojs的使用
2017-08-29 16:40
721 查看
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/
获取更多信息
邮件:support@easydarwin.orgWEB:www.EasyDarwin.org
Copyright © EasyDarwin.org 2012-2017
相关文章推荐
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs的使用
- EasyNVR H5无插件直播方案前端架构之:直播页面和视频列表页面切换的问题
- EasyNVR H5无插件直播方案前端构建之:videojs初始化的一些样式处理
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs的使用
- EasyNVR H5无插件直播方案前端构建之:区分页面是自跳转还是分享依据
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs初始化的一些样式处理
- EasyNVR H5无插件直播方案前端构建之:播放界面添加实时云台控制界面
- EasyNVR H5无插件直播方案前端构建之:如何播放HLS
- EasyNVR H5无插件直播方案前端构建之:如何区分PC端和移动端
- EasyNVR H5无插件直播方案前端构建之:实时直播的四分屏的前端展示
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs初始化的一些样式处理
- EasyNVR H5无插件直播方案前端构建之:引用videojs无法自动播放
- 基于EasyDarwin框架实现EasyNVR H5无插件直播流媒体服务器方案
- EasyNVR无插件IPC摄像机直播方案前端构建之:如何区分PC端和移动端
- EasyNVR H5无插件RTSP直播方案在Windows server 2012上修复无法定位GetNumaNodeProcessorMaskEx的问题
- EasyNVR无插件播放HLS/RTMP网页直播方案前端完善:监听表单变动
- EasyNVR H5无插件摄像机直播解决方案前端解析之:如何在播放界面添加实时云台控制界面
- EasyNVR无插件IPC摄像机直播方案前端构建之:区分页面是自跳转还是分享依据
- EasyNVR无插件IPC摄像机直播方案前端构建之:如何区分PC端和移动端
- EasyNVR H5无插件摄像机直播解决方案前端解析之:关于直播页面和视频列表页面切换的问题