瀏覽器提供原生支持視頻的新能力使得網(wǎng)頁(yè)開(kāi)發(fā)人員更易于在不依賴于外置插件有效性的情況下，在他們的網(wǎng)站上添加視頻組件。由于蘋(píng)果公司現(xiàn)階段在iPhone和iPad上使用的Flash技術(shù)的局限性，傳輸HTML5視頻的能力就顯得尤為重要了。

這篇教程主要向你介紹video元素及其屬性，以及它所支持的不同的視頻類(lèi)型。這是這一系列三篇教程中的第一篇，主要涵蓋了video（標(biāo)簽），audio標(biāo)簽以及這兩種標(biāo)簽使用的自定義控制等方面的內(nèi)容。

注意：你可以通過(guò)下載，研究sample files（示例文件），自己探究一些示例代碼以及這篇文章中列舉出來(lái)的一些基本概念。

如果你使用Flash Player創(chuàng)建一個(gè)在網(wǎng)站上播放的簡(jiǎn)單的MP4視頻，你可能會(huì)用到下面的代碼：

<object type="application/x-shockwave-flash"   
data="player.swf?videoUrl=myVideo.mp4&autoPlay=true" height="210" width="300">   
<param name="movie" value="player.swf?videoUrl=myVideo.mp4&autoPlay=true">   
</object>   

如果使用的是HTML5，你可以使用以下代碼：

<video src="myVideo.mp4" controls autoplay width="300" height="210"></video>  

當(dāng)然，這個(gè)HTML5示例是極端簡(jiǎn)化了的，但是它所實(shí)現(xiàn)的功能是一樣的，你也可以看出這是多么的簡(jiǎn)單。

視頻編碼解碼器是一款可以對(duì)特定文件格式的視頻進(jìn)行編碼或解碼的軟件。雖然HTML5標(biāo)準(zhǔn)最初強(qiáng)制支持Theora Ogg視頻編碼解碼器，但在受到Apple和Nokia的反對(duì)之后，這個(gè)要求就從標(biāo)準(zhǔn)中去除掉了。

令人遺憾的是，這就意味著不同的瀏覽器支持不同的編碼解碼器，這聽(tīng)起來(lái)確實(shí)讓人痛苦啊。但最近情況有所改善，你只需要（向不同的瀏覽器）提供兩種不 同格式的視頻內(nèi)容：向Safari和Internet Explorer 9提供MP4/H.264格式視頻，向Firefox，Chrome和Opera提供WebM格式視頻。Firefox也支持Theora Ogg，但在版本4之后就開(kāi)始支持WebM格式了。

當(dāng)然，也有一種為你的視頻內(nèi)容定義不止一個(gè)的視頻文件的方法，這個(gè)我在稍后就會(huì)講到。

你在向你的網(wǎng)頁(yè)上嵌入視頻時(shí)用到的video元素，包含了幾種不同的屬性，在表1中列出了其中幾項(xiàng)。

表1. video標(biāo)簽屬性

屬性	描述
src	提供視頻文件的URL地址。
autoplay	表明如果可能，網(wǎng)頁(yè)上的視頻應(yīng)該自動(dòng)播放。
controls	告知瀏覽器顯示默認(rèn)視頻控制設(shè)置。
muted	設(shè)置視頻的初始音頻狀態(tài)為靜音 （此屬性目前還不為任何瀏覽器所支持）
loop	表明視頻應(yīng)該連續(xù)不斷的循環(huán)播放 （Firefox瀏覽器目前暫不支持這一屬性）
poster	設(shè)置顯示默認(rèn)圖片，而不是視頻的第一幀。
width	指定video元素寬度的像素值。
height	指定video元素高度的像素值。
preload	向?yàn)g覽器提示視頻預(yù)加載狀態(tài)。有三種可能的取值：   none: 不執(zhí)行任何的預(yù)加載 metadata: 只加載視頻的元數(shù)據(jù)，例如持續(xù)時(shí)間 auto: 讓瀏覽器自行決定（默認(rèn)的）

例如，如果你想視頻自動(dòng)播放，由瀏覽器提供控制，你只需要使用如下代碼：

<video src="myVideo.mp4" autoplay controls></video>  

前面部分的實(shí)例中只用到了一個(gè)視頻文件，使用一種MP4格式。那么你又會(huì)如何著手去處理WebM格式視頻文件呢？

這就是source元素出現(xiàn)的背景（由來(lái)）。一個(gè)video元素（標(biāo)簽）可以包含任意數(shù)目的source元素（標(biāo)簽），使得你可以為同一個(gè)視頻指定不同的源。

source標(biāo)簽的使用

source元素包含了表2所示的三個(gè)屬性。

表2. source標(biāo)簽屬性

Attribute	Description
src	視頻源的URL地址。
type	視頻源的類(lèi)型，例如video/mp4 or video/webm等。 實(shí)際使用的編碼解碼器也可以在這個(gè)字符串中指定。
media	視頻的預(yù)期媒體類(lèi)型Specified using 指定CSS3 Media Queries，這一屬性使你能夠?yàn)檎粕显O(shè)備指定不同的視頻（例如指定尺寸更小，分辨率更低的視頻）。

要在同一視頻中指定MP4和WebM源，你可以使用以下代碼：

當(dāng)瀏覽器試圖播放視頻時(shí)，它會(huì)逐一核查視頻來(lái)源列表，直到找到可以播放的視頻。因此，由于Firefox不能播放MP4格式文件，它會(huì)跳過(guò)MP4格式源文件，但它可以流暢的播放WebM格式源文件。

注意，在前面的實(shí)例中，由于source標(biāo)簽使用了中的src屬性，我把video標(biāo)簽中的src屬性移除掉了。如果你在video標(biāo)簽中指定了src屬性，它就會(huì)覆蓋（掉）source標(biāo)簽中的所有src屬性。

指定編碼解碼器

如果你想的話，你可以指定用以編碼視頻文件的確切的編碼解碼器。這可以幫助瀏覽器確定能否播放這一視頻。由于很多時(shí)候你并不確定真正使用的是哪種編碼解碼器，最好只是提供文件類(lèi)型，由播放器自身來(lái)決定（能不能播放）。

如果你想指定某一編碼解碼器，你可以使用如下代碼：

 

<video autoplay controls> 
<source src="myVideo.mp4" type='video/mp4; codec="mp4a.40.2"'>  
<source src="myVideo.webm" type='video/webm; codec="vp8"'> 
</video> 

注意編碼解碼器是如何被添加到type屬性的，特別要注意引號(hào)的使用以及type和codec之間由分號(hào)隔開(kāi)。在向type屬性添加codec是，很容易把引號(hào)放錯(cuò)位置，這樣就會(huì)由于瀏覽器無(wú)法正常解讀source元素，使得視頻不能正常播放。因此，如果你想明確的指定編碼解碼器，一定要仔細(xì)。

當(dāng)然，你也要向那些繼續(xù)使用諸如Internet Explorer 8及更低版本，不支持HTML5的瀏覽器的用戶提供相應(yīng)的解決方案。

由于瀏覽器會(huì)自動(dòng)忽略它們不能解讀的東西，像Internet Explorer 8那樣的傳統(tǒng)瀏覽器就會(huì)跳過(guò)video和source元素，只視它們?yōu)椴淮嬖?。你可以利用這一特性，尋找另外一種替代的顯示你的視頻的方法，通過(guò)一個(gè)簡(jiǎn)單的下載鏈接或者是像Flash Player那樣的第三方插件。

在前面例子的基礎(chǔ)上，你可以按照下述方法添加一個(gè)同一視頻文件的鏈接：

<video autoplay controls>    
<source src="myVideo.mp4" type="video/mp4">    
<source src="myVideo.webm" type="video/webm">    
<a href="myVideo.mp4">Download the video</a>    
</video>   

傳統(tǒng)的瀏覽器將會(huì)只顯示視頻文件下載鏈接。

添加對(duì)Flash Player插件的支持也同樣很簡(jiǎn)單：

<video autoplay controls>    
<source src="myVideo.mp4" type="video/mp4">    
<source src="myVideo.webm" type="video/webm">    
<object type="application/x-shockwave-flash" data="player.swf?videoUrl=myVideo.mp4&autoPlay=true">    
<param name="movie" value="player.swf?videoUrl=mVideo.mp4&autoPlay=true">    
</object>    
<a href="myVideo.mp4">Download the video</a>    
</video>   

在上面這個(gè)例子中，像Internet Explorer 8那樣版本較老的瀏覽器就會(huì)在Flash Player中顯示視頻（如果系統(tǒng)中裝有Flash Player），視頻的下載鏈接也會(huì)顯示。通過(guò)提供下載鏈接以及退回到使用Flash Player等方法，你向那些沒(méi)有安裝Flash Player的用戶提供了通過(guò)下載視頻，然后在電腦上觀看的視頻訪問(wèn)方法。

如果你擔(dān)心其他人可以自由下載，分享你的視頻，HTML5視頻可能就不是你想要的。不管你使用的是這篇文章中講到的哪種方法，你都向其 他用戶提供了你的視頻文件的直接URL地址，用戶可以自由下載你的視頻文件。目前使用的HTML5還不能防止這類(lèi)事件的發(fā)生，在將來(lái)的某個(gè)時(shí)候可能在 HTML5中會(huì)出現(xiàn)處理數(shù)據(jù)版權(quán)管理（DRM）的規(guī)范的方法，但目前還沒(méi)有。

想了解更多的關(guān)于HTML5和DRM的信息，請(qǐng)參閱W3C’s HTML FAQs on this topic。

---

關(guān)于HTML5視頻字幕的相關(guān)規(guī)定最初是HTML5標(biāo)準(zhǔn)的一部分。定義一種WebSRT文件格式，這種格式可以通過(guò)使用通常的SRT文件格式被用來(lái)指定視頻字幕。

稍后重命名為WebVTT（網(wǎng)頁(yè)視頻文本軌道），字幕標(biāo)準(zhǔn)源于HTML5標(biāo)準(zhǔn)，然后自己成為一個(gè)標(biāo)準(zhǔn)體系。

WebVTT文件格式

WebVTT文件是一個(gè)特殊格式化的文本文件，其文件擴(kuò)展名為.vtt。文件本身必須是UTF-8編碼的，并以type/vtt MIME類(lèi)型標(biāo)記。這一類(lèi)型文件必須在頂端以WebVTT\r），新的一行（\n），或者是新的一行之后回車(chē)（\r\n）結(jié)束。

這類(lèi)文件中包含許多的cue，用以指定文本和視頻文件中字幕的時(shí)間定位。

其基本格式如下：

WEBVTT [unique-cue-identifier] [hh]mm:ss.msmsms --> [hh]mm:ss.msmsms [cue settings] Subtitle text 1 [Subtitle text 2] ...

（代碼中）unique-cue-identifer字符串是可有可無(wú)的。它是幫助確定文件中cue的簡(jiǎn)單字符串。cue定時(shí)以一種簡(jiǎn)單的格式給出，小時(shí)（hour）部分可有可無(wú)。每一個(gè)cue都可以有若干的cue設(shè)置，用于文字的對(duì)齊和定位。這些在下面將有更詳細(xì)的介紹。接下來(lái)就是字幕的文字部分了，可以在同一行顯示，也可以多行顯示。

視頻文件中個(gè)別的cue可以通過(guò)這種方式定位不同的時(shí)間，通過(guò)另起一行分隔每一個(gè)cue塊。

下面是一個(gè)簡(jiǎn)短的例子：

WEBVTT 1 00:00:10.500 --> 00:00:13.000 Elephant's Dream 2 00:00:15.000 --> 00:00:18.000 At the left we can see...

你可以使用cue設(shè)置來(lái)設(shè)置視頻中顯示的字幕文字的位置和對(duì)齊方式。其中包含了五種這方面的設(shè)置，如表3所示。

表 3. Cue設(shè)置

Cue設(shè)置	描述
D:vertical | vertical-lr	文本方向：豎直從左到右或是豎直從右到左。
L:value	行位置，以百分比值表示還是以特定的行號(hào)表示。
A:start | middle | end	相對(duì)于行的文本對(duì)齊方式。
T:value	文本位置，以百分比形式表示，相對(duì)于視頻畫(huà)面。
S:value	文字大小，以百分比表示。

例如，要把文字定位于行的末端，到視頻畫(huà)面頂端10%的位置，你就會(huì)用到下述的cue設(shè)置：

2 00:00:15.000 --> 00:00:18.000 A:end L:10% At the left we can see...

你現(xiàn)在了解了如何通過(guò)這種方式創(chuàng)建WebVTT文件，為整個(gè)視頻添加字幕。

track標(biāo)簽

你可能會(huì)很想知道WebVTT文件是如何被關(guān)聯(lián)到你的視頻中去。答案就是track標(biāo)簽。這個(gè)標(biāo)簽也被引入到了HTML5中，使得你可以為諸如video標(biāo)簽的媒體元素指定外源的文本軌道。track標(biāo)簽的屬性詳見(jiàn)表4。

表 4. track標(biāo)簽屬性

屬性	描述
kind	用于track定義的內(nèi)容類(lèi)型?？梢允窍旅鎺追N取值之一：subtitles，captions，descriptions，chapters，metadata。
src	文本軌道的URL地址，這里指的是WebVTT文件。
srclang	文本軌道資料的語(yǔ)言。
label	文本軌道的用戶可讀標(biāo)簽。
default	如果存在，表明這是默認(rèn)文本軌道。

例如，假設(shè)你想把名為english-subtitles.vtt的WebVTT文件加載到上述的視頻示例中去。你可以使用下述代碼來(lái)實(shí)現(xiàn)：

<video autoplay controls>   
<source src="myVideo.mp4" type="video/mp4">   
<source src="myVideo.webm" type="video/webm">   
<track src="english-subtitles.vtt" kind="subtitles" srclang="en" label="English subtitles">   
</video>   

上述代碼就把帶有英語(yǔ)字幕的WebVTT文件綁定在了你的視頻上。當(dāng)然，在video元素中，你可以使用多個(gè)track元素。你可以使用（track元素的）srclang屬性指定多種語(yǔ)言的WebVTT文件，實(shí)現(xiàn)向視頻添加多語(yǔ)言字幕支持。（然后，如果用戶的參數(shù)設(shè)置中并沒(méi)有指明更為合適的軌跡，default屬性就可以被用于追蹤默認(rèn)的軌跡）

瀏覽器支持

不幸的是，到目前為止，還沒(méi)有哪一款瀏覽器直接支持WebVTT，但很多的有效的JavaScript資料庫(kù)使你可以使用WebVTT文件格式，并為你的視頻提供字幕，包括：

• Playr
• LeanBack Player
• Captionator(CaptionCrunch版本)
• MediaElement.js

所有這些解決措施都支持視頻字幕，有些還會(huì)提供一些額外的特性。瀏覽器也開(kāi)始添加這方面的支持，Safari和Firefox在這方面取得了一些進(jìn) 展，Microsoft最近也推出了關(guān)于WebVTT的演示活動(dòng)，像我們展示供應(yīng)商對(duì)不久的將來(lái)將會(huì)發(fā)展起來(lái)的WebVTT支持的嚴(yán)肅態(tài)度。

你已經(jīng)看到了，在你的網(wǎng)頁(yè)上添加HTML5視頻，以及為傳統(tǒng)瀏覽器用戶提供使用Flash Player播放視頻內(nèi)容的復(fù)古的解決方法是多么的簡(jiǎn)單。盡管功能很強(qiáng)大，但由于缺乏DRM（數(shù)字版權(quán)管理）性能，HTML5視頻目前并不適于那些想要保 護(hù)視頻內(nèi)容的用戶使用。同時(shí)你也看到了，你在將來(lái)如何向你的視頻添加字幕，以及你現(xiàn)在如何通過(guò)JavaScript資料庫(kù)實(shí)現(xiàn)這一功能。

在這一系列教程中的第二部分內(nèi)容中，我主要講解了HTML5的audio元素，在第三部分內(nèi)容中，你將會(huì)學(xué)到更多的關(guān)于HTML5多媒體元素自定義控制方面的內(nèi)容。

1. HTML 5多媒體組件（自定義控件使用）
2. HTML 5多媒體組件（音頻的使用）
3. HTML 5本地存儲(chǔ)之兼容性與存儲(chǔ)監(jiān)聽(tīng)
4. HTML 5拖拽預(yù)覽
5. HTML 5瀏覽器的支持情況