HTML5視頻的那些事兒

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

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

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

視頻

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

常用格式

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

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

視頻組成

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

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

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

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

三種格式

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

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

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

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

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

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

• 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 富媒體標(biāo)簽
• 一堆屬性
• DOM接口
• DOM事件
• 向后兼容
• 字幕

embed & flash

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

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

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

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

由于embed的缺陷，flash來了，感謝flash帶來了很棒的體驗(yàn)，并且其裝機(jī)量能夠達(dá)到99%，這種做法優(yōu)點(diǎn)是能夠和播放器交互，也能定制皮膚等；但缺點(diǎn)也很明顯，需要開發(fā)單獨(dú)的播放器插件（雖然可以用別人開發(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標(biāo)簽

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

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

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

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

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

Video DOM

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

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

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

兼容性

瀏覽器對視頻格式的支持各不相同，小一點(diǎn)的瀏覽器廠商比如firefox和opera不愿支持商業(yè)的視頻格式（mp4），因?yàn)樾枰Ц秾＠M(fèi)，而大一點(diǎn)的廠商如微軟蘋果等，不愿支持開源的格式，因?yàn)榭赡苡袑＠麊栴}。

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

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

再來看看手機(jī)上的兼容情況。

Source

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

<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>

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

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

字幕

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

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

<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格式如下所示，標(biāo)記了每個(gè)字幕開始出現(xiàn)的時(shí)間和消失的時(shí)間。

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)然整個(gè)流程其實(shí)也可以反過來，即優(yōu)先使用flash。

播放器

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

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

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

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

• VideoJS
• jwplayer（收費(fèi)）

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

總結(jié)

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

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

相關(guān)資料

• [移動(dòng)端HTML5
• 視頻播放的那些事

參考資料

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