如何使用 HTML5 語法在 Web 頁面中嵌入視頻呢？非常簡(jiǎn)單：

        <video id="sampleMovie" src="HTML5Sample.mov" controls></video>
      

?

就是這些！這就是向網(wǎng)站添加視頻播放器所需的全部工作，無需任何第三方插件或嵌入其他網(wǎng)站的代碼，只要一個(gè)簡(jiǎn)單的標(biāo)記即可。

?

實(shí)際情況可沒有這么簡(jiǎn)單。

?

HTML5 的復(fù)雜性與語法無關(guān)，而是源自瀏覽器支持和視頻編碼。Web 開發(fā)人員習(xí)慣了糾結(jié)于瀏覽器的兼容性，但瀏覽器制造商在編解碼器標(biāo)準(zhǔn)方面的分歧更讓人頭疼。為了構(gòu)建一個(gè)成功的 HTML5 網(wǎng)站，您需要考慮 Chrome 4、Firefox 4 和 Internet Explorer 之類的現(xiàn)代瀏覽器如何實(shí)現(xiàn) HTML5 視頻 Web 標(biāo)準(zhǔn)，以及如何處理用戶在舊版瀏覽器中查看視頻的情況。

?

限制和好處

首先，要設(shè)定期望值，您應(yīng)該知道播放視頻時(shí)? HTML5 ?的限制。

?

HTML5 規(guī)范中目前還沒有包括全屏播放。目前只有幾個(gè)瀏覽器（不是全部）支持全屏播放。

?

默認(rèn)的播放器菜單都是非常基礎(chǔ)的，而在品牌認(rèn)知的皮膚或復(fù)雜的觀感上可能花了很多開發(fā)精力。除此之外，不同的瀏覽器仍以不同的方式實(shí)現(xiàn) HTML5 和 CSS。例如，添加圓角時(shí)，您的視頻播放器在? IE ?和? Firefox 中看起來可能是圓角，但在? Chrome ?和 Safari 中還是方的。

?

規(guī)范不允許平滑或自適應(yīng)流，而這是一個(gè)正規(guī)視頻播放網(wǎng)站的基本功能。

?

更重要的是，規(guī)范并不（而且顯然不會(huì)）包括數(shù)字版權(quán)管理 (DRM)。這意味著永遠(yuǎn)不會(huì)通過 HTML5 傳遞受版權(quán)保護(hù)的內(nèi)容（至少版權(quán)持有人不會(huì)）。

?

當(dāng)然還有編解碼器的問題。稍后將提供此主題的更多信息。

?

您放棄這些東西后得到了什么？實(shí)際上，得到的不多。

?

首先，不專注于視頻的網(wǎng)站其開發(fā)人員可以更加容易地實(shí)現(xiàn)網(wǎng)站流媒體，而無需通過第三方視頻網(wǎng)站，如YouTube 或 Vimeo 等。以前，開發(fā)人員直接嵌入視頻有三種主要的選擇：

• 嵌入必須完整下載后才能播放的非流媒體文件
• 購(gòu)買第三方插件（這不一定適用于所有瀏覽器）
• 使用專用的媒體服務(wù)器，這是一個(gè)非常昂貴且/或?qū)τ诖蟛糠志W(wǎng)站而言太過復(fù)雜的解決方案

HTML5 允許開發(fā)人員在無需其他第三方軟件支持的可更換皮膚播放器中實(shí)現(xiàn)流媒體，從而緩解了這些問題。

第二，HTML5 規(guī)范允許開發(fā)人員為已有定論的平臺(tái)提供視頻，如iOS 產(chǎn)品（iPhone、iPad）。但看待這個(gè)問題的方式有點(diǎn)不同，它使開發(fā)人員從限制或控制如何交付媒體的專有交付平臺(tái)中解放出來。畢竟，這是開放標(biāo)準(zhǔn)的目的所在。

?

最后，HTML5 不是外來的技術(shù)，它是HTML 的最新修訂版。這意味著 JavaScript 和 CSS 能夠與它很好地協(xié)作。與現(xiàn)有的 HTML 源代碼一樣，開發(fā)人員可以在客戶端或服務(wù)器端操作這些代碼。

?

視頻編解碼器

前文已經(jīng)提到，HTML5 視頻最大的挑戰(zhàn)是在多個(gè)編碼解碼器中準(zhǔn)備和納入您的內(nèi)容。目前，每個(gè)瀏覽器有其自己的首選視頻格式。非無縫實(shí)現(xiàn)的 HTML5 視頻將會(huì)變得更糟。

?

現(xiàn)在視頻編碼有三種選擇：

1. H.264 – 一種可以利用硬件加速的流行格式，由桌面和設(shè)備的圖形芯片提供支持；也是市場(chǎng)上許多較新的視頻和移動(dòng)設(shè)備的默認(rèn)錄制格式；但是，該格式是有專利的，雖然對(duì)非商業(yè)用途仍然免費(fèi)，但它很復(fù)雜，也比較昂貴。請(qǐng)參考 此文檔 了解更詳細(xì)信息。何時(shí)進(jìn)行商業(yè)內(nèi)容分發(fā)。支持：IE 9、Safari 3.1 和 Chrome（目前）
2. Ogg Theora – 一個(gè)開放標(biāo)準(zhǔn)，沒有專利問題，是免費(fèi)的。支持：Firefox 3.5、Chrome 4、Opera 10.5。
3. VP8 (WebM) – 一個(gè)較新的標(biāo)準(zhǔn)，最近被 Google 收購(gòu)，并作為一個(gè)開源發(fā)布，免費(fèi)（但仍有專利）的格式。支持：Firefox 4.0、Chrome 6.0、Opera 10.6。

下圖可讓您更容易了解此內(nèi)容：

圖 1.1

?

Chrome 值得特別一提，因?yàn)?Google 實(shí)際將刪除對(duì)三種 HTML5 視頻格式之一的支持。收購(gòu) On2（WebM 格式的開發(fā)商和贊助商）后，Google 宣布以后的 Chrome 的版本將不再支持 H.264。他們已經(jīng)根據(jù) BSD 許可證發(fā)布了 WebM，授予全球用戶免費(fèi)、非獨(dú)占的、免版稅的專利許可。雖然 Chrome 是目前唯一支持所有三種格式的瀏覽器，但市場(chǎng)將會(huì)很快分成兩個(gè) OS 默認(rèn)的瀏覽器陣營(yíng)，只支持 H.264 的 ?Internet Explorer 和 Safari，以及支持除 H.264 外其他標(biāo)準(zhǔn)的所有其他瀏覽器。

?

嚴(yán)重警告：為了簡(jiǎn)化此處的討論，本說明不深入探討三種基本格式之間的差異。一旦涉及視頻和音頻配置文件的不同可能性，以及視頻和音頻容器和編解碼器 之間的區(qū)別，事情會(huì)變得更加復(fù)雜。例如，雖然 iPhone 4 用 H.264 格式錄制視頻，但不能將該視頻直接放到 HTML5 網(wǎng)站；必須先通過轉(zhuǎn)換器運(yùn)行它。

?

最好能有一個(gè)無所不包的公告，說明視頻標(biāo)準(zhǔn)X 是普遍支持的，應(yīng)該作為HTML5 視頻的首選格式。不幸的是，正如您從上文看到的，情況并非如此。如果您包括用戶驅(qū)動(dòng)的瀏覽器擴(kuò)展，那么支持最廣泛的格式就是 Ogg Theora。但是，你不能假定用戶，特別是公司工作場(chǎng)所中的用戶，只是為了觀看 HTML5 視頻就擁有安裝其他視頻編解碼器或?yàn)g覽器擴(kuò)展的知識(shí)或能力。如果出于某種原因，您必須選擇某一個(gè)視頻編解碼器，應(yīng)該選擇哪一個(gè)？這不一定。考慮以下選擇：

?

H.264

在這三個(gè)標(biāo)準(zhǔn)中，H.264 最具人氣，質(zhì)量可靠，受到了媒體專業(yè)人士的認(rèn)可。它還受到一些業(yè)內(nèi)最大公司的支持，包括Microsoft 和蘋果，具有MPEG LA 的授權(quán)。因此也有個(gè)最主要的問題：H.264 不是免費(fèi)的。

對(duì)于消費(fèi)者來說，它當(dāng)然是免費(fèi)的。大部分開發(fā)人員都不用擔(dān)心授權(quán)問題（ 目前 ）。但是，視頻分發(fā)網(wǎng)站就不一定了。H.264 專利授權(quán)的來龍去脈超出了本文的范圍（ 而且很容易讓人糊涂 ），只要說大家有很多問題就夠了。

?

對(duì)于大多數(shù)開發(fā)人員，專利問題將很大程度上歸結(jié)于 開放標(biāo)準(zhǔn) 和圖像質(zhì)量之間的哲學(xué)爭(zhēng)論。與 Ogg（參見下文）和VP8 ( WebM ) 相比，H.264 提供了更高的圖像質(zhì)量和更好的媒體流。由于包括 PC 和移動(dòng)設(shè)備等多種平臺(tái)上都具有硬件加速功能，它還具備性能優(yōu)勢(shì)。

?

最后，考慮易生產(chǎn)性，這不是一個(gè)無關(guān)緊要的問題。所有主要的視頻編輯器，包括 Final Cut、Adobe Premiere 和 Avid，都導(dǎo)出為 H.264 格式。Ogg Theora 或 VP8 則不行。如果您的商店生產(chǎn)自己的視頻，并且數(shù)量眾多，那么僅使用 H.264 將節(jié)省很多工作。

?

Ogg Theora

Ogg 是唯一一個(gè)真正沒有專利負(fù)擔(dān)的標(biāo)準(zhǔn)。但是，也可以說是 質(zhì)量最低 的標(biāo)準(zhǔn)，雖然相差其實(shí)不多。與H.264 的多次 短兵 相接 發(fā)現(xiàn)，H.264 仍占上風(fēng)。雖然 Ogg 可將內(nèi)容編碼為更緊湊的文件，但它產(chǎn)生的圖像品質(zhì)比 H.264 的要低，并且在媒體流能力上會(huì)更差。

?

VP8 (WebM)

在高質(zhì)量但存在專利問題 (H.264) 和質(zhì)量較差但免費(fèi) (Ogg) 這兩個(gè)極端之間，VP8 占有一席之地，它可能三個(gè)標(biāo)準(zhǔn)中最具爭(zhēng)議的一個(gè)。到目前為止，測(cè)試表明 H.264 提供的視頻品質(zhì)比? VP8 ?略高，但這種差異在大多數(shù)商業(yè)活動(dòng)中可以忽略不計(jì)。

?

更大的問題在于開放標(biāo)準(zhǔn)。一方認(rèn)為，Google 遠(yuǎn)離了 H.264 轉(zhuǎn)而支持其“開放” WebM 標(biāo)準(zhǔn) ，甚至在 Creative Commons 許可證下發(fā)布了 WebM。另一方面，有很多人爭(zhēng)論說，在這種情況下，“開放” 可能不是真正意義上的“開放” 。以 JPEG 訴訟為例， Microsoft 指出 ，即使 WebM 不會(huì)出現(xiàn) Google 引起的專利問題，如果沒有 Google 明確的用戶免責(zé)申明，許多公司和個(gè)人部署 WebM 視頻時(shí)，都有可能讓自己面臨 MPEG LA 的專利侵權(quán)訴訟。

?

總之，在大多數(shù)情況下，沒有一種辦法能滿足所有情況下所有項(xiàng)目的需要。但對(duì)于大多數(shù)情況下的大多數(shù)項(xiàng)目，您可能都希望使用 H.264。它不僅僅是生產(chǎn)和消費(fèi)端使用最廣泛的格式，而且由于硬件加速而具有明顯的性能優(yōu)勢(shì)。對(duì)于商業(yè)的視頻網(wǎng)站，為了開拓新市場(chǎng)，可能必須咬緊牙關(guān)支 付龐大的許可費(fèi)。

?

但是，這場(chǎng)辯論往往由于一個(gè)主要因素而無果而終：現(xiàn)在或在不久的將來，所有瀏覽器是否都支持 HTML5。但是，并非所有瀏覽器都支持所有編解碼器。就像您不會(huì)編寫在 IE 中看起來不錯(cuò)，但在 Firefox 中一團(tuán)糟的樣式表一樣，您希望創(chuàng)建跨平臺(tái)兼容的視頻標(biāo)簽。

?

視頻轉(zhuǎn)換器

對(duì)于開發(fā)人員，這意味著在實(shí)際情況下需要將視頻內(nèi)容至少編碼為兩種視頻格式（最好是三個(gè)）才能符合 HTML5 規(guī)范的要求。幸運(yùn)的是，有幾個(gè)工具隨時(shí)可以幫助您完成此任務(wù)。

?

Miro Video Converter ：您的主要工具，此開放源代碼轉(zhuǎn)換器有 Mac 和 Windows 版本，可以將幾乎所有視頻源轉(zhuǎn)換為所有可能要使用的 HTML5 格式，以及幾個(gè)其他設(shè)備和平臺(tái)特定的格式。

?

Handbrake ：另一種用于 Mac 和 Windows（和 Linux）的開放源代碼轉(zhuǎn)換器，Handbrake 是專門轉(zhuǎn)換為 H.264 的出色工具。

?

MPEG Streamclip () ：MPEG Streamclip 雖然是不開放源代碼，但Mac 和 Windows 用戶可以免費(fèi)使用。它也處理 lH.264，同時(shí)它也可以轉(zhuǎn)換為 HTML5 規(guī)范之外的許多其他有用格式。

?

Firefogg ：一種專業(yè)工具，F(xiàn)irefogg 是一個(gè) Firefox 擴(kuò)展，只能將視頻轉(zhuǎn)換為 Ogg 的格式，并因此得名。要使用它，需要先下載 Firefox，然后再安裝擴(kuò)展。

?

<video>標(biāo)記

您應(yīng)該會(huì)記得，HTML5 在嵌入視頻時(shí)本質(zhì)上歸結(jié)為使用一個(gè)標(biāo)記：<video>。但正如其他 HTML 標(biāo)記一樣，有很多參數(shù)選項(xiàng)。以下是標(biāo)記本身中的一些要點(diǎn)：

?

src ：視頻源的位置和名稱，它的工作原理與 <img> 標(biāo)記的 src 參數(shù)相同。但是要注意，在這里不是識(shí)別視頻源，您可以并且也應(yīng)該在標(biāo)記外部識(shí)別（參見下文）。

        <video id="sampleMovie" src="HTML5Sample.mov"></video>
      

?

width和height ：（可選）視頻的尺寸。更準(zhǔn)確地說，這是視頻幀寬度和高度，而不是視頻本身。與 <img> 相似，省去此選項(xiàng)將導(dǎo)致瀏覽器使用視頻源的默認(rèn)尺寸。但是與 <img> 不同的是，使用與源不同的大小將縮放視頻，而不是扭曲它。換句話說，嵌入的視頻將保留其源的比率。如果您指定的大小小于源，整個(gè)視頻將會(huì)縮小。但是，如果 您指定的大小大于源，視頻將以其原始大小顯示，所指定尺寸的其余部分將使用空白區(qū)域填充。

        <video id="sampleMovie" src="HTML5Sample.mov" width=”640” height=”360”></video>
      

?

controls ：添加默認(rèn)視頻控件覆蓋。如果您不想創(chuàng)建自己的自定義控件，這是非常有用的。但是，如果想深入 研究自定義播放器控件，可以使用 JavaScript 和 CSS。該規(guī)范允許操作 play ()、pause()、currentTime、volume、muted 等方法和屬性。

        <video id="sampleMovie" src="HTML5Sample.mov" controls></video>
      

?

preload ：只要用戶點(diǎn)擊頁面就開始下載視頻。要指示預(yù)加載視頻，只需包括該屬性。要指示其不預(yù)加載，將該屬性設(shè)置為等于"none"。

        <video id="sampleMovie" src="HTML5Sample.mov" preload></video>
<video id="sampleMovie" src="HTML5Sample.mov" preload=”none”></video>
      

?

autoplay ：流氓參數(shù)。該參數(shù)指示瀏覽器加載頁面時(shí)就播放視頻。不要使用它。

        <video id="sampleMovie" src="HTML5Sample.mov" autoplay></video>
      

接下來是見證奇跡的時(shí)刻。HTML5 規(guī)范包括一個(gè)方便的古怪功能，可以彌補(bǔ)當(dāng)前圍繞視頻格式所發(fā)生的瀏覽器功能障礙。不使用 src 屬性指定視頻源，您可以在<video> 標(biāo)記中嵌套多個(gè)標(biāo)記，每個(gè)都有不同的視頻源。瀏覽器將自動(dòng)瀏覽列表并選擇第一個(gè)能夠播放的視頻。例如：

        <video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
</video>
      

?

如果在 Chrome 中測(cè)試該代碼，將獲得 H.264 視頻。但是在 Firefox 中運(yùn)行它，會(huì)在相同的地方看到 Ogg 視頻。

?

理想情況下，雖然不是所有瀏覽器都絕對(duì)需要，您應(yīng)該在 type 參數(shù)中包括 MIME 類型，確保與所有的瀏覽器兼容。此參數(shù)應(yīng)指定視頻類型，以及視頻和音頻編解碼器。參數(shù)的細(xì)節(jié)取決于視頻的編碼方式。在這里可以找到很多可能的方案： http://wiki.whatwg.org/wiki/Video_type_parameters 。

        <video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
      

?

有關(guān)正在使用的所有三種視頻類型的示例，請(qǐng)?jiān)L問 我的站點(diǎn) 。

在此頁面上，您會(huì)看到三個(gè)不同視頻的源代碼：H.264、Ogg 和 WebPM。視頻本身標(biāo)有它們的編解碼器，以便您查看瀏覽器中顯示的內(nèi)容。

?

關(guān)于 MIME 類型的一個(gè)小竅門：您的服務(wù)器需要配置為可識(shí)別各種類型。對(duì)于 Windows Server，這意味著將不同的 MIME 類型項(xiàng)添加到 IIS。對(duì)于 Apache 服務(wù)器，您需要將? AddType 指令 添加到 httpd.conf 或本地 .htaccess 文件中：

        AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
      

?

優(yōu)雅降級(jí)

雖然完整的多源 <video> 標(biāo)記可在多個(gè) HTML5 就緒的瀏覽器上工作，但它仍然沒有解決舊的、HTML5 之前的瀏覽器問題。幸運(yùn)的是，該規(guī)范包括一個(gè)向下兼容機(jī)制。

?

將目前正在使用的任何<object> 標(biāo)記，或者將使用的 HTML5 之前的標(biāo)記，添加到 <source> 參數(shù)列表的底部。通常情況下，此對(duì)象將指定您使用的播放器（假定是第三方插件），以及該播放器的參數(shù)和源。下例使用流行的免費(fèi)第三方播放器 Flowplayer。

        <video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashvars" value='config={"clip":{"url":"HTML5Sample_flv.flv","autoPlay":false,"autoBuffering":true}}' />
</object>
</video>
      

?

這篇精彩文章更詳細(xì)地解釋了這一點(diǎn)：Kroc Camen “ Video for Everybody "。您還可以從這里查找包含所有三種視頻格式和 flash 對(duì)象的代碼生成器：Jonathan Neal 的 “ Video for Everybody Generator ”。

?

資源

查看以下內(nèi)容，了解HTML5 視頻的更多信息，包括特定編解碼器的復(fù)雜性：

• 5 Things You Need to Know about HTML5 Video and Audio ?– 如何快速地在您的網(wǎng)站上瀏覽高清視頻
• Dive Into HTML5 ?– 有關(guān)一般的 HTML5 和視頻學(xué)習(xí)的重要資源
• Video Support Demo ?–比較不同視頻編解碼器（包括瀏覽器插件）的網(wǎng)站
• Wiki Commons: Converting Video ?– 關(guān)于 Ogg Theora 的更多內(nèi)容，包括音頻和視頻編解碼器、播放器和轉(zhuǎn)換器
• Google 放棄了對(duì) H.264 的支持
• H.264 and WebM ?– 一篇有趣的報(bào)道，關(guān)于相互競(jìng)爭(zhēng)的編解碼器標(biāo)準(zhǔn)和瀏覽器制造商的觀點(diǎn)

via： Justin Whitney

版權(quán)聲明：轉(zhuǎn)載時(shí)請(qǐng)以超鏈接形式標(biāo)明文章 原始出處 和作者信息及本聲明
文章引用地址： http://www.iefans.net/html5-qianru-shipin/ ?作者：iefans