HTML5視頻的那些事兒

最近在研究HTML5播放視頻的事情，發(fā)現(xiàn)這個東西真是據(jù)復(fù)雜無比啊，我勒個去了，然后給團隊做了個技術(shù)分享。

本文將總結(jié)下自己對視頻研究的結(jié)果，做個記錄，同時也能方便后來人的學(xué)習(xí)，涉及視頻的方方面面。

剛剛突然發(fā)現(xiàn)了自己800年前做的一個視頻播放器，才想起來當(dāng)時好像也研究過一點。

視頻

其實視頻早于Web而存在的，1990年Web誕生，但早在此之前視頻就已經(jīng)存在了，視頻技術(shù)這么多年的發(fā)展，其歷史復(fù)雜性超乎你的想象。同 時富文本格式本來就是一件復(fù)雜的事情，更是讓視頻變得復(fù)雜無比。

常用格式

我們生活場可能遇到過下面這些格式的視頻：

• rm/rmvb/mkv
• avi（Audio Video Interleave）
• flv（Flash Video）
• mp4（MPEG-4 Part 14）
• ogv
• webm

視頻組成

如果拍腦袋想的話，一個完整的視頻大概有下面一些部分組成：

• meta信息
• 視頻
• 音頻
• 字幕
• 縮略圖
• 其他信息

視屏的組成大概如下圖所示：

下面三幅圖都是mp4格式，但其視頻編碼確實不同的。

三種格式

我們平時說的mp4到底是什么？其實對于一個視頻有三種格式，如下：

• 容器格式
• 視頻編解碼器
• 音頻編解碼器

以后再有人問你視頻是什么格式的時候，一定要先問問對方問的是那種格式。

容器格式規(guī)定了一個視屏文件的視頻編碼器，音頻編碼器，字幕，縮略圖等信息的格式，常用的視頻格式如下，括號中是對應(yīng)的文件后綴名。

• Ogg容器（.ogv）
• MPEG4-容器（.mp4）
• Webm容器（.webm）
• Matroska容器（.mkv）

再來說說視頻編解碼器，視頻編解碼器規(guī)定了壓縮視頻和播放視頻時使用的算法，常用的視頻編碼如下：

• H.264（AVC Advanced Video Codec）
• VP8
• Ogg Theora

注意：AVC就是H.264。

音頻編解碼器和視屏編解碼器類似，規(guī)定了音頻的壓縮和播放的算法，常用的音頻編碼如下：

• AAC（Advanced Audio Coding）
• MPEG-3
• Ogg Vorbis

視頻總結(jié)

說了這么多，總結(jié)起來就是下面的一張表格，下面列出了常用的視頻文件格式和其對應(yīng)的視頻格式。

HTML5 Video

理清了視頻的歷史，該輪到今天的主角上場了，再來說說HTML5的Video，HTML5的Video包括如下的一堆內(nèi)容：

• img audio video 富媒體標簽
• 一堆屬性
• DOM接口
• DOM事件
• 向后兼容
• 字幕

embed & flash

在開始介紹Video之前先來介紹介紹在之前是如何在網(wǎng)頁中播放視頻的，在最開始的時候我們使用embed標簽來嵌入插件的方式來播放的，其會調(diào)用系統(tǒng)上的原生播放器，如windows上的 media player，mac上的quick time等。

這樣做的缺點就是這塊區(qū)域完全是黑盒，無法和播放器進行通信，甚至不知道是否在播放。

使用的方式相對簡單，只需下面的一行代碼即可，其中src是視屏的路徑。

<embed src="media/helloworld.swf" />

由于embed的缺陷，flash來了，感謝flash帶來了很棒的體驗，并且其裝機量能夠達到99%，這種做法優(yōu)點是能夠和播放器交互，也能定制皮膚等；但缺點也很明顯，需要開發(fā)單獨的播放器插件（雖然可以用別人開發(fā)好的），并且其使用方式略顯復(fù)雜，需要依賴第三方插件。

播放flash的代碼如下，我想沒人能夠記得住吧，就想XHTML的doctype一樣，囧。

<object id="flowplayer" width="704" height="400" data="media/flowplayer-3.2.16.swf" type="application/x-shockwave-flash">
    <param name="movie" value="media/flowplayer-3.2.16.swf" /> 
    <param name="flashvars" value='config={"clip":"media/beach.mp4"}' />
</object>

video標簽

video標簽的靈感來源于img標簽，都是富媒體，既然能用img引入圖片，那么為何不能用video引入vide呢？于是便有了video標簽。

在頁面中引入一個視頻的代碼和引入圖片一樣簡單。

<video src="media/butterfly.mp4" controls>
	您的瀏覽器不支持 video 標簽。
</video>

src是視頻的路徑，controls表示顯示視頻播放控件，默認是不顯示的。標簽之間的文字會出現(xiàn)在不支持video標簽的瀏覽器中，作為后備內(nèi)容出現(xiàn)，用來兼容不支持video標簽的瀏覽器。

怎么樣是不是很簡單，其實video標簽還有一些屬性可以配置。屬性列表可以查看這里。

Video DOM

video標簽對應(yīng)有Video對象，可以通過js進行操作。Video對象有一組屬性和方法，同時還包括一組事件。

比如可以讀取一個視頻的時長和當(dāng)前播放的時間，同時還能設(shè)置當(dāng)前播放的時間，可以在視頻暫停的時候添加自定義事件等。

• 屬性列表
• 方法列表
• 事件列表

兼容性

瀏覽器對視頻格式的支持各不相同，小一點的瀏覽器廠商比如firefox和opera不愿支持商業(yè)的視頻格式（mp4），因為需要支付專利費，而大一點的廠商如微軟蘋果等，不愿支持開源的格式，因為可能有專利問題。

好消息是現(xiàn)在firefox也支持mp4了，而opera從12版本后就換成了webkit內(nèi)核也不存在這個問題了。

下面看一下PC上的瀏覽器對視頻格式的支持情況。

再來看看手機上的兼容情況。

Source

未解決兼容性的問題，HTML5也給出了解決辦法，那就是source標簽。

<video controls autoplay>
    <source src="media/butterfly.mp4" type="video/mp4">
    <source src="media/butterfly.webm" type="video/webm">
    <source src="media/butterfly.ogv" type="video/ogg">
</video>

瀏覽器會最先嘗試播放第一個視頻，如果發(fā)現(xiàn)不支持會播放第二個，依次類推直到找到一個可以播放的，或者全部能播放。。。

注意：瀏覽器支持video標簽，不能播放視頻的情況下是不會顯示后備方案的，需要和不支持video標簽的情況區(qū)分開。

字幕

字幕也是一個復(fù)雜的問題，簡單的一個字幕就可能有下面的需求：格式，換行，顏色，卡拉OK等。所以現(xiàn)存的字幕格式就有50多種。

使用字幕的方式和使用source的方式類似，同時可指定多個字幕文件，用來指代不同語言的字幕，用戶可以自己選擇想要的字幕。

<video controls loop autoplay>
    <source src="media/butterfly.mp4" type="video/mp4">
    <source src="media/butterfly.webm" type="video/webm">
    <track src="media/butterfly.vtt" srclang="en" kind="subtitles" label="English" default>
    <track src="media/butterfly_fr.vtt" srclang="fr" kind="subtitles" label="French">
</video>

vtt格式如下所示，標記了每個字幕開始出現(xiàn)的時間和消失的時間。

WEBVTT

00:00:01.000 --> 00:00:03.000
Butterflies are lovely.

00:00:04.000 --> 00:00:08.000
Don't you think?

一套方案

這里提供一套完整的方案，支持video的瀏覽器優(yōu)先使用video，否則退化為使用flash，如果也不支持flash則退化為提示文案。

<video controls width="704" height="400">
    <source src="media/beach.mp4" type="video/mp4">
    <source src="media/beach.webm" type="video/webm">
    <object id="flowplayer" width="704" height="400" data="flowplayer-3.2.16.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer-3.2.16.swf" /> 
        <param name="flashvars" value='config={"clip":"media/beach.mp4"}' />
        <p>您的瀏覽器不支持此視頻</p>
    </object>
</video>

當(dāng)然整個流程其實也可以反過來，即優(yōu)先使用flash。

播放器

很多時候我們不能使用video標簽的播放控件，可能有種種原因，比如自定義皮膚。這時候需要我們自己寫一個播放器。

頭腦風(fēng)暴一下我們大概需要實現(xiàn)以下功能：

• 兼容性
• 自定義一套皮膚
• 各種api
• 各種消息（事件）

如果你感興趣可以自己嘗試下，其實自己寫一個完整的播放器還是很有挑戰(zhàn)性的，好在社區(qū)已經(jīng)為我們寫好了，推薦兩個不錯的播放器插件。

• VideoJS
• jwplayer（收費）

如果上面介紹的兩個插件還不能滿足你的需求，你可能需要更多的視頻插件，可以查看這里。

總結(jié)

好了到這里本文就結(jié)束了，如果你還有什么疑惑或建議那么在下面的評論區(qū)給我留言討論吧。

本文提到的所有代碼都可以在這里找到。

相關(guān)資料

• [移動端HTML5
• 視頻播放的那些事

參考資料

• 《HTML5秘籍》第二版
• 《HTML5程序設(shè)計》第二版
• 維基百科
• w3cschool