LiveGBS無插件播放頁面的集成----單獨的播放器樣式

時間 2019-11-10

標籤 livegbs 插件播放頁面集成單獨樣式简体版

原文原文鏈接

背景需求：

LiveGBS對於應用最爲普遍的web端，直接包含在LiveCMS軟件包的www目錄下；
對於LiveGBS的web端，使用的是vue+webpack進行打包壓縮的，不只項目體積小，並且很友好的提高了瀏覽器的可讀性；html

對於實際的應用過程當中，LiveGBS自身的web頁面也是擁有自身的風格，所以和許多須要將視頻播放頁面集成到自身系統的用戶就不是很友好了。LiveGBS自身的播放頁面也是包含了，雲臺控制、視頻分享、掃碼直播等功能，然而部分客戶須要的僅僅只是一個播放頁面的集成。
這樣，即便是簡約的風格，也在用戶的集成中帶來了必定的麻煩。
vue

解決方案：

有過閱讀EasyNVR軟件包使用文檔的用戶應該知道了這個解決方案；其實在這個播放頁面已經給出了答案；webpack

就是經過iframe集成，在集成的過程當中，經過對於參數的傳遞來，去除自身不須要的元素，最終集成到自身的頁面的就是一個單純的視頻播放器畫面；並且咱們還能夠經過傳遞參數來設置播放器的長寬比和是否將視頻直播鋪滿全屏直播；web

具體傳遞參數
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網絡

代碼實例及樣式展現：測試

測試集成播放頁樣式：

原始樣式：
code

簡單的集成應用：視頻

<html>
    <head>
        <title>播放頁集成測試用</title>
    </head>
<body>
    <div>
        <iframe src="http://121.40.50.44:10000/play.html?serial=34020000001110000001&code=34020000001320000002&iframe=yes&aspect=640x360" width="640" height="360" allowfullscreen allow="autoplay"></iframe>
    </div>
</body>
</html>

關於LiveGBS

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。