1. 程式人生 > >HTML5和HLS協議兩種技術完美結合解決移動端網頁播放問題

HTML5和HLS協議兩種技術完美結合解決移動端網頁播放問題

html5 hls、網頁直播

什麽是HTML5

我們需要先了解一下HTML是什麽。HTML的英文全稱為Hyper Text Markup Language,即超文本標記語言。HTML5HTML的一個新版本。HTML 不是一種編程語言,而是一種標記語言 (markup language)HTML5 是對HTML 標準的第五次修訂。

其主要的目標是將互聯網語義化,以便更好地被人類和機器閱讀,並同時提供更好地支持各種媒體的嵌入。HTML5的設計目的是為了在移動設備上支持多媒體。新的語法特征被引進以支持這一點,如videoaudiocanvas 標記。HTML5還引進了新的功能,可以真正改變用戶與文檔的交互方式。

什麽是HLS

HLS (HTTP Live Streaming),Apple的動態碼率自適應技術。主要用於PCApple終端的音視頻服務。包括一個m3u(8)的索引文件,TS媒體分片文件和key加密串文件。

把上述2個技術性很強的概念表述翻譯下。就是說H5是一種HTML的新標準,這種新標準支持原生的video標簽和video控件。因為video控件標簽又支持HLS協議播放。 所以得以實現在手機移動端的網頁播放。H5是解決網頁播放問題,HLS解決的是移動端播放問題。 兩者的結合使得手機移動端的網頁播放得以完美的實現。 從而實現了所有觀看直播和點播視頻的大眾無需再下載任何插件就可以欣賞視頻內容。 從技術角度上講,是一種視頻觀看欣賞體驗的大飛躍。

在 HTML5 頁面上使用 HLS

直接: <video src="example.m3u8" controls></video>

或者:

<video controls>

<source src="example.m3u8"></source>

</video>

這兩種技術結合應用最為廣泛就是網絡視頻直播點播領域。很多品牌的流媒體直播點播系統目前都直接利用兩種技術的結合給廣大的觀看視頻用戶提供了好的技術支撐,如Adobe Flash Media Server,Wowza Media Server或800Li Media Server。

技術分享

手機網頁觀看直播演示

技術分享

技術分享


手機APP並支持HTML所需要的開發工具

1. Bizness Apps

2. APPMakr

3. Appsgeyser

4. Mobile Roadie

5. DevmyApp


HTML5和HLS協議兩種技術完美結合解決移動端網頁播放問題