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

標籤：html5   hls、網頁直播   

什麼是HTML5

 

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

 

其主要的目標是將互連網語義化，以便更好地被人類和機器閱讀，並同時提供更好地支援各種媒體的嵌入。HTML5的設計目的是為了在行動裝置上支援多媒體。新的文法特徵被引進以支援這一點，如video、audio和canvas 標記。HTML5還引進了新的功能，可以真正改變使用者與文檔的互動方式。

 

什麼是HLS

 

HLS (HTTP Live Streaming)，Apple的動態碼率自適應技術。主要用於PC和Apple終端的音視頻服務。包括一個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>

 

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

650) this.width=650;" src="http://www.800li.net/Uploads/Editor/2017-05-19/591e97a581d18.jpg" style="padding:0px;list-style:none;vertical-align:middle;height:auto;border:0px;" />

手機網頁觀看直播示範

650) this.width=650;" src="http://www.800li.net/Uploads/Editor/2017-05-19/591e97e372d70.png" style="padding:0px;list-style:none;vertical-align:middle;height:auto;border:0px;" />

650) this.width=650;" src="http://www.800li.net/Uploads/Editor/2017-05-19/591e980bc225b.png" style="padding:0px;list-style:none;vertical-align:middle;height:auto;border:0px;" />

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

 

1. Bizness Apps

2. APPMakr

3. Appsgeyser

4. Mobile Roadie

5. DevmyApp

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