EasyNVR播放頁面的整合----單獨的播放器樣式
背景需求:
EasyNVR自身擁有獨立的客戶端體系,安卓和IOS擁有各自獨立的APP,
安卓下載地址:https://fir.im/EasyNVR;
IOS下載可直接在APPstore搜尋EasyNVR即可;
對於應用最為廣泛的web端,直接包含在EasyNVR軟體包的www目錄下;
對於EasyNVR的web端,使用的是vue+webpack進行打包壓縮的,不僅專案體積小,而且很友好的提升了瀏覽器的可讀性;
對於實際的應用過程中,EasyNVR自身的web頁面也是擁有自身的風格,因此和許多需要將視訊播放頁面整合到自身系統的使用者就不是很友好了。EasyNVR自身的播放頁面也是包含了,雲臺控制、視訊分享、掃碼直播等功能,然而部分客戶需要的僅僅只是一個播放頁面的整合。
這樣,即使是簡約的風格,也在使用者的整合中帶來了一定的麻煩。
解決方案:
有過閱讀EasyNVR軟體包使用文件的使用者應該知道了這個解決方案;其實在這個播放頁面已經給出了答案;
就是通過iframe整合,在整合的過程中,通過對於引數的傳遞來 ,去除自身不需要的元素,最終整合到自身的頁面的就是一個單純的視訊播放器畫面;而且我們還可以通過傳遞引數來 設定播放器的長寬比和是否將視訊直播鋪滿全屏直播;
具體傳遞引數
iframe:是否以iframe形式嵌入,支援傳遞引數yes、no;
autoplay:是否開啟自動直播,支援傳遞引數yes、no;
stretch:是否開啟自動直播,支援傳遞引數yes、no;
aspect:播放器的比例,傳遞形式x:y,預設16:9
例: ip:port/play.html?channel=id&iframe=yes&aspect=4:3&autoplay=yes&stretch=yes
程式碼例項及樣式展示:
測試整合播放頁樣式:
原始樣式:
簡單的整合應用:
<html> <head> <title>播放頁整合測試用</title> </head> <body> <div> <iframe src="http://192.168.1.202:10800/play.html?channel=1&iframe=yes&aspect=640x360" width="640" height="360" allowfullscreen></iframe> </div> </body> </html>
關於EasyNVR
EasyNVR能夠通過簡單的網路攝像機通道配置,將傳統監控行業裡面的高清網路攝像機IP Camera、NVR等具有RTSP協議輸出的裝置接入到EasyNVR,EasyNVR能夠將這些視訊源的音視訊資料進行拉取,轉換為RTMP/HLS,進行全平臺終端H5直播(Web、Android、iOS),並且EasyNVR能夠將視訊源的直播資料對接到第三方CDN網路,實現網際網路級別的直播分發;
點選連結加入群【EasyNVR解決方案】:383501345
Copyright © EasyDarwin Team 2012-2018