1. 程式人生 > >如何生成嵌入網頁直播的HTML代碼

如何生成嵌入網頁直播的HTML代碼

在線直播 視頻播放 播放器 html嵌入網頁直播 800li media server

當今的直播業務發展日新月異的大環境下,若企業、機構、政府、學校官方網站甚至是個人的網站主頁,要是沒有個直播版塊或視頻點播版塊,應該都不好意思說是官網吧。 難為了管理網站的技術人員,購買第三方的直播點播雲服務,小並發還比較適合。但往往會預估並發量比較大,計算下來,用雲平臺根本不劃算。 尤其現在很多直播雲平臺都不再提供按照流量付費的方式,而轉以峰值帶寬付費方式。對比下來,最終只有自建直播點播服務器。

那麽問題就來了。 如何把直播內容+播放器嵌入到網頁上呢?網友們也紛紛提問:

ü HTML怎麽添加一個直播flash播放器;

ü 如何在網頁中放置視頻播放代碼;

ü 怎麽在HTML網頁中插入直播視頻;

ü 網頁嵌入在線直播代碼。

那麽我們來抽絲剝繭來分析下如何生成嵌入網頁的直播的HTML代碼呢?

目前市場上直播都已采集先進的流式傳輸stream方式。那麽RTMP流媒體直播系統、RTMFP/P2P流媒體系統HLS直播系統就是必需的。選擇的這種流媒體系統要求:

1. 生成flashHTML播放器代碼,嵌入網頁保證無需安裝插件。

2. 手機端采用HLS協議,H5技術,保證安卓和蘋果移動端也不需要安裝任何插件。或者提供M3U8的視頻播放地址,開發APP調用視頻進行流式播放。

3. 直播系統如Adobe Media Server800Li Media Server能夠自適應多種播放終端。

PC上用flash

HTML代碼示例 object+embed標簽)

現在很多直播系統軟件的安裝和部署都設計很簡潔,管理都是web網頁觀看,沒有繁雜的操作步驟,簡單易懂。 當然也會直接提供直播內容插入網頁的HTML標簽,考慮兼容性都會有obeject標簽+embed標簽兩種。 如下圖:


技術分享

代碼如下:


   <script type="text/javascript" src="http://192.168.1.44:8083/assets/player.js"></script>
<script type="text/javascript">p2ps_embed("auto", "live", "http://192.168.1.44:8083/videos/live/22/39/tUabV17nAPCev", 
"p2ps_video", "640", "480", "10.1.0", "http://192.168.1.44:8083/assets/expressInstall.swf",{}, {allowFullScreen:true, 
allowScriptAccess: "always"});
800Limediaserver</script><div id="p2ps_video"><h1>我們需要Flash player 10.1 或以上版本來播放。</h1><p><a href=
"http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt=
"安裝最新的Flash player" /></a></p>
</div>


技術分享


嵌入網頁顯示:


技術分享


轉發其他人的直播,如愛奇藝,優酷等,會提供分享嵌入網頁代碼。 如下圖:


技術分享


本文出自 “12894099” 博客,請務必保留此出處http://12904099.blog.51cto.com/12894099/1925720

如何生成嵌入網頁直播的HTML代碼