建站
咨詢
售后
建站咨詢
新聞中心
要求
創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(wǎng)站、網(wǎng)站重做改版、濰城網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為濰城等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
必備知識(shí)：要充分利用本文，需要熟悉HTML。
用戶級(jí)別：中級(jí)
范例文件：HTML5Video.zip (30.9 MB)
毫無(wú)疑問(wèn)，關(guān)于HTML5的一個(gè)最受歡迎的以及談?wù)撟疃嗟奶匦允瞧湓诓唤柚T如Flash Player等第三方插件的情況下，直接在你的網(wǎng)頁(yè)上嵌入視頻組件的能力。
瀏覽器提供原生支持視頻的新能力使得網(wǎng)頁(yè)開發(fā)人員更易于在不依賴于外置插件有效性的情況下，在他們的網(wǎng)站上添加視頻組件。由于蘋果公司現(xiàn)階段在iPhone和iPad上使用的Flash技術(shù)的局限性，傳輸HTML5視頻的能力就顯得尤為重要了。
這篇教程主要向你介紹video元素及其屬性，以及它所支持的不同的視頻類型。這是這一系列三篇教程中的第一篇，主要涵蓋了video（標(biāo)簽），audio標(biāo)簽以及這兩種標(biāo)簽使用的自定義控制等方面的內(nèi)容。
注意：你可以通過(guò)下載，研究sample files（示例文件），自己探究一些示例代碼以及這篇文章中列舉出來(lái)的一些基本概念。
視頻服務(wù)：兩項(xiàng)技術(shù)的快速比較
如果你使用Flash Player創(chuàng)建一個(gè)在網(wǎng)站上播放的簡(jiǎn)單的MP4視頻，你可能會(huì)用到下面的代碼：
- data="player.swf?videoUrl=myVideo.mp4&autoPlay=true" height="210" width="300">
-
如果使用的是HTML5，你可以使用以下代碼：
當(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)中去除掉了。
令人遺憾的是，這就意味著不同的瀏覽器支持不同的編碼解碼器，這聽起來(lái)確實(shí)讓人痛苦啊。但最近情況有所改善，你只需要（向不同的瀏覽器）提供兩種不 同格式的視頻內(nèi)容：向Safari和Internet Explorer 9提供MP4/H.264格式視頻，向Firefox，Chrome和Opera提供WebM格式視頻。Firefox也支持Theora Ogg，但在版本4之后就開始支持WebM格式了。
當(dāng)然，也有一種為你的視頻內(nèi)容定義不止一個(gè)的視頻文件的方法，這個(gè)我在稍后就會(huì)講到。
video標(biāo)簽
你在向你的網(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)。有三種可能的取值：
|
例如，如果你想視頻自動(dòng)播放，由瀏覽器提供控制，你只需要使用如下代碼：
source標(biāo)簽
前面部分的實(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 | 視頻源的類型，例如video/mp4 or video/webm等。 實(shí)際使用的編碼解碼器也可以在這個(gè)字符串中指定。 |
| media | 視頻的預(yù)期媒體類型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)決定（能不能播放）。
如果你想指定某一編碼解碼器，你可以使用如下代碼：
-
注意編碼解碼器是如何被添加到type屬性的，特別要注意引號(hào)的使用以及type和codec之間由分號(hào)隔開。在向type屬性添加codec是，很容易把引號(hào)放錯(cuò)位置，這樣就會(huì)由于瀏覽器無(wú)法正常解讀source元素，使得視頻不能正常播放。因此，如果你想明確的指定編碼解碼器，一定要仔細(xì)。
回歸傳統(tǒng)
當(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è)同一視頻文件的鏈接：
Download the video -
傳統(tǒng)的瀏覽器將會(huì)只顯示視頻文件下載鏈接。
添加對(duì)Flash Player插件的支持也同樣很簡(jiǎn)單：
-
Download the video -
在上面這個(gè)例子中，像Internet Explorer 8那樣版本較老的瀏覽器就會(huì)在Flash Player中顯示視頻（如果系統(tǒng)中裝有Flash Player），視頻的下載鏈接也會(huì)顯示。通過(guò)提供下載鏈接以及退回到使用Flash Player等方法，你向那些沒(méi)有安裝Flash Player的用戶提供了通過(guò)下載視頻，然后在電腦上觀看的視頻訪問(wèn)方法。
數(shù)字版權(quán)管理
如果你擔(dān)心其他人可以自由下載，分享你的視頻，HTML5視頻可能就不是你想要的。不管你使用的是這篇文章中講到的哪種方法，你都向其 他用戶提供了你的視頻文件的直接URL地址，用戶可以自由下載你的視頻文件。目前使用的HTML5還不能防止這類事件的發(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類型標(biāo)記。這一類型文件必須在頂端以WebVTT\r），新的一行（\n），或者是新的一行之后回車（\r\n）結(jié)束。
這類文件中包含許多的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ì)于視頻畫面。 |
| S:value | 文字大小，以百分比表示。 |
例如，要把文字定位于行的末端，到視頻畫面頂端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)簽的屬性詳見表4。
表 4. track標(biāo)簽屬性
| 屬性 | 描述 |
| kind | 用于track定義的內(nèi)容類型。可以是下面幾種取值之一：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)：
-
上述代碼就把帶有英語(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ì)提供一些額外的特性。瀏覽器也開始添加這方面的支持，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)容。
- HTML 5多媒體組件（自定義控件使用）
- HTML 5多媒體組件（音頻的使用）
- HTML 5本地存儲(chǔ)之兼容性與存儲(chǔ)監(jiān)聽
- HTML 5拖拽預(yù)覽
- HTML 5瀏覽器的支持情況
標(biāo)題名稱：HTML5多媒體組件（視頻的使用）
轉(zhuǎn)載來(lái)于：http://m.5511xx.com/article/cdiehsi.html
