DIV CSS 佈局教程網

毫無疑問，關於HTML5的一個最受歡迎的以及談論最多的特性是其在不借助諸如Flash Player等第三方插件的情況下，直接在你的網頁上嵌入視頻組件的能力。

浏覽器提供原生支持視頻的新能力使得網頁開發人員更易於在不依賴於外置插件有效性的情況下，在他們的網站上添加視頻組件。由於蘋果公司現階段在iPhone和iPad上使用的Flash技術的局限性，傳輸HTML5視頻的能力就顯得尤為重要了。

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

視頻服務：兩項技術的快速比較

 

如果你使用Flash Player創建一個在網站上播放的簡單的MP4視頻，你可能會用到下面的代碼：

 

 

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

 

當然，這個HTML5示例是極端簡化了的，但是它所實現的功能是一樣的，你也可以看出這是多麼的簡單。

 

視頻編碼解碼器

 

視頻編碼解碼器是一款可以對特定文件格式的視頻進行編碼或解碼的軟件。雖然HTML5標准最初強制支持Theora Ogg視頻編碼解碼器，但在受到Apple和Nokia的反對之後，這個要求就從標准中去除掉了。

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

當然，也有一種為你的視頻內容定義不止一個的視頻文件的方法，這個我在稍後就會講到。

 

video標簽

 

你在向你的網頁上嵌入視頻時用到的video元素，包含了幾種不同的屬性，在表1中列出了其中幾項。

表1. video標簽屬性

屬性 描述 src 提供視頻文件的URL地址。 autoplay 表明如果可能，網頁上的視頻應該自動播放。 controls 告知浏覽器顯示默認視頻控制設置。 muted 設置視頻的初始音頻狀態為靜音 （此屬性目前還不為任何浏覽器所支持） loop 表明視頻應該連續不斷的循環播放 （Firefox浏覽器目前暫不支持這一屬性） poster 設置顯示默認圖片，而不是視頻的第一幀。 width 指定video元素寬度的像素值。 height 指定video元素高度的像素值。 preload 向浏覽器提示視頻預加載狀態。有三種可能的取值：

 

• none: 不執行任何的預加載
• metadata: 只加載視頻的元數據，例如持續時間
• auto: 讓浏覽器自行決定（默認的）

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

 

 

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

 

source標簽

 

前面部分的實例中只用到了一個視頻文件，使用一種MP4格式。那麼你又會如何著手去處理WebM格式視頻文件呢？

這就是source元素出現的背景（由來）。一個video元素（標簽）可以包含任意數目的source元素（標簽），使得你可以為同一個視頻指定不同的源。

source標簽的使用

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

 

表2. source標簽屬性

Attribute Description src 視頻源的URL地址。 type 視頻源的類型，例如video/mp4 or video/webm等。 實際使用的編碼解碼器也可以在這個字符串中指定。 media 視頻的預期媒體類型Specified using 指定CSS3 Media Queries，這一屬性使你能夠為掌上設備指定不同的視頻（例如指定尺寸更小，分辨率更低的視頻）。

 

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

 

 

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

 

當浏覽器試圖播放視頻時，它會逐一核查視頻來源列表，直到找到可以播放的視頻。因此，由於Firefox不能播放MP4格式文件，它會跳過MP4格式源文件，但它可以流暢的播放WebM格式源文件。

注意，在前面的實例中，由於source標簽使用了中的src屬性，我把video標簽中的src屬性移除掉了。如果你在video標簽中指定了src屬性，它就會覆蓋（掉）source標簽中的所有src屬性。

指定編碼解碼器

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

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

 

 

<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屬性的，特別要注意引號的使用以及type和codec之間由分號隔開。在向type屬性添加codec是，很容易把引號放錯位置，這樣就會由於浏覽器無法正常解讀source元素，使得視頻不能正常播放。因此，如果你想明確的指定編碼解碼器，一定要仔細。

 

回歸傳統

 

當然，你也要向那些繼續使用諸如Internet Explorer 8及更低版本，不支持HTML5的浏覽器的用戶提供相應的解決方案。

由於浏覽器會自動忽略它們不能解讀的東西，像Internet Explorer 8那樣的傳統浏覽器就會跳過video和source元素，只視它們為不存在。你可以利用這一特性，尋找另外一種替代的顯示你的視頻的方法，通過一個簡單的下載鏈接或者是像Flash Player那樣的第三方插件。

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

 

 

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

 

傳統的浏覽器將會只顯示視頻文件下載鏈接。

添加對Flash Player插件的支持也同樣很簡單：

 

 

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

 

在上面這個例子中，像Internet Explorer 8那樣版本較老的浏覽器就會在Flash Player中顯示視頻（如果系統中裝有Flash Player），視頻的下載鏈接也會顯示。通過提供下載鏈接以及退回到使用Flash Player等方法，你向那些沒有安裝Flash Player的用戶提供了通過下載視頻，然後在電腦上觀看的視頻訪問方法。

 

數字版權管理

 

如果你擔心其他人可以自由下載，分享你的視頻，HTML5視頻可能就不是你想要的。不管你使用的是這篇文章中講到的哪種方法，你都向其 他用戶提供了你的視頻文件的直接URL地址，用戶可以自由下載你的視頻文件。目前使用的HTML5還不能防止這類事件的發生，在將來的某個時候可能在 HTML5中會出現處理數據版權管理（DRM）的規范的方法，但目前還沒有。

想了解更多的關於HTML5和DRM的信息，請參閱W3C’s HTML FAQs on this topic。

 

視頻字幕

 

關於HTML5視頻字幕的相關規定最初是HTML5標准的一部分。定義一種WebSRT文件格式，這種格式可以通過使用通常的SRT文件格式被用來指定視頻字幕。

稍後重命名為WebVTT（網頁視頻文本軌道），字幕標准源於HTML5標准，然後自己成為一個標准體系。

WebVTT文件格式

WebVTT文件是一個特殊格式化的文本文件，其文件擴展名為.vtt。文件本身必須是UTF-8編碼的，並以type/vtt MIME類型標記。這一類型文件必須在頂端以WebVTTr），新的一行（n），或者是新的一行之後回車（rn）結束。

這類文件中包含許多的cue，用以指定文本和視頻文件中字幕的時間定位。

其基本格式如下：

 

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

 

（代碼中）unique-cue-identifer字符串是可有可無的。它是幫助確定文件中cue的簡單字符串。cue定時以一種簡單的格式給出，小時（hour）部分可有可無。每一個cue都可以有若干的cue設置，用於文字的對齊和定位。這些在下面將有更詳細的介紹。接下來就是字幕的文字部分了，可以在同一行顯示，也可以多行顯示。

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

下面是一個簡短的例子：

 

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設置來設置視頻中顯示的字幕文字的位置和對齊方式。其中包含了五種這方面的設置，如表3所示。

表 3. Cue設置

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

例如，要把文字定位於行的末端，到視頻畫面頂端10%的位置，你就會用到下述的cue設置：

 

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

 

你現在了解了如何通過這種方式創建WebVTT文件，為整個視頻添加字幕。

track標簽

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

表 4. track標簽屬性

屬性 描述 kind 用於track定義的內容類型。可以是下面幾種取值之一：subtitles，captions，descriptions，chapters，metadata。 src 文本軌道的URL地址，這裡指的是WebVTT文件。 srclang 文本軌道資料的語言。 label 文本軌道的用戶可讀標簽。 default 如果存在，表明這是默認文本軌道。

例如，假設你想把名為english-subtitles.vtt的WebVTT文件加載到上述的視頻示例中去。你可以使用下述代碼來實現：

 

 

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

 

上述代碼就把帶有英語字幕的WebVTT文件綁定在了你的視頻上。當然，在video元素中，你可以使用多個track元素。你可以使用（track元素的）srclang屬性指定多種語言的WebVTT文件，實現向視頻添加多語言字幕支持。（然後，如果用戶的參數設置中並沒有指明更為合適的軌跡，default屬性就可以被用於追蹤默認的軌跡）

浏覽器支持

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

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

所有這些解決措施都支持視頻字幕，有些還會提供一些額外的特性。浏覽器也開始添加這方面的支持，Safari和Firefox在這方面取得了一些進 展，Microsoft最近也推出了關於WebVTT的演示活動，像我們展示供應商對不久的將來將會發展起來的WebVTT支持的嚴肅態度。

 

下一步閱讀方向

 

你已經看到了，在你的網頁上添加HTML5視頻，以及為傳統浏覽器用戶提供使用Flash Player播放視頻內容的復古的解決方法是多麼的簡單。盡管功能很強大，但由於缺乏DRM（數字版權管理）性能，HTML5視頻目前並不適於那些想要保 護視頻內容的用戶使用。同時你也看到了，你在將來如何向你的視頻添加字幕，以及你現在如何通過JavaScript資料庫實現這一功能。

在這一系列教程中的第二部分內容中，我主要講解了HTML5的audio元素，在第三部分內容中，你將會學到更多的關於HTML5多媒體元素自定義控制方面的內容。