EasyNVR H5無插件攝像機直播解決方案前端解析之：videojs的使用

時間 2019-11-16

標籤 easynvr h5 插件攝像機直播解決方案前端解析 videojs 使用简体版

原文原文鏈接

video.js的基本使用方法

1、videojs的初始化加載

videojs初始化加載分爲兩中bash

1.標籤式加載

在引入videojs加載文件的前提下，能夠在video標籤中添加屬性值「data-setup=’{}’」,而且在class屬性中添加「video-js」;兩者缺一不可；markdown

<video class="video-js vjs-default-skin" data-setup='{}'>

「vjs-default-skin」是加載出來播放器默認樣式；網絡

2.JS加載

經過js進行加載不須要在video標籤中添加「data-setup=’{}’」，能夠經過js來初始化videojs；ide

var player = videojs('video');

若是須要加載多個播放器，能夠根據標籤中的id屬性來進行播放器的加載。spa

player = videojs("player" + i, {
                            techOrder: ["flash"],
                            autoplay: true
                        });

效果以下：code

2、videojs基本樣式的調整

videojs加載成功後默認播放按鈕是出如今播放器左上角的，爲了讓播放按鈕默認居中顯示能夠經過給video標籤添加class屬性值「vjs-big-play-centered」；視頻

<video class="video-js vjs-default-skin vjs-big-play-centered" data-setup='{}'>

效果以下：get

關於EasyNVR

EasyNVR可以經過簡單的網絡攝像機通道配置，將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具備RTSP協議輸出的設備接入到EasyNVR，EasyNVR可以將這些視頻源的音視頻數據進行拉取，轉換爲RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），而且EasyNVR可以將視頻源的直播數據對接到第三方CDN網絡，實現互聯網級別的直播分發；直播

詳細說明：http://www.easydarwin.org/easynvr/string