如何使用 HTML5 語法在 Web 頁面中嵌入視頻呢？非常簡單：
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
?
就是這些！這就是向網站添加視頻播放器所需的全部工作，無需任何第三方插件或嵌入其他網站的代碼，只要一個簡單的標記即可。
?
實際情況可沒有這么簡單。
?
HTML5 的復雜性與語法無關，而是源自瀏覽器支持和視頻編碼。Web 開發人員習慣了糾結于瀏覽器的兼容性，但瀏覽器制造商在編解碼器標準方面的分歧更讓人頭疼。為了構建一個成功的 HTML5 網站，您需要考慮 Chrome 4、Firefox 4 和 Internet Explorer 之類的現代瀏覽器如何實現 HTML5 視頻 Web 標準，以及如何處理用戶在舊版瀏覽器中查看視頻的情況。
?
限制和好處
首先，要設定期望值，您應該知道播放視頻時? HTML5 ?的限制。
?
HTML5 規范中目前還沒有包括全屏播放。目前只有幾個瀏覽器（不是全部）支持全屏播放。
?
默認的播放器菜單都是非常基礎的，而在品牌認知的皮膚或復雜的觀感上可能花了很多開發精力。除此之外，不同的瀏覽器仍以不同的方式實現 HTML5 和 CSS。例如，添加圓角時，您的視頻播放器在? IE ?和? Firefox 中看起來可能是圓角，但在? Chrome ?和 Safari 中還是方的。
?
規范不允許平滑或自適應流，而這是一個正規視頻播放網站的基本功能。
?
更重要的是，規范并不（而且顯然不會）包括數字版權管理 (DRM)。這意味著永遠不會通過 HTML5 傳遞受版權保護的內容（至少版權持有人不會）。
?
當然還有編解碼器的問題。稍后將提供此主題的更多信息。
?
您放棄這些東西后得到了什么？實際上，得到的不多。
?
首先，不專注于視頻的網站其開發人員可以更加容易地實現網站流媒體，而無需通過第三方視頻網站，如YouTube 或 Vimeo 等。以前，開發人員直接嵌入視頻有三種主要的選擇：
- 嵌入必須完整下載后才能播放的非流媒體文件
- 購買第三方插件（這不一定適用于所有瀏覽器）
- 使用專用的媒體服務器，這是一個非常昂貴且/或對于大部分網站而言太過復雜的解決方案
HTML5 允許開發人員在無需其他第三方軟件支持的可更換皮膚播放器中實現流媒體，從而緩解了這些問題。
第二，HTML5 規范允許開發人員為已有定論的平臺提供視頻，如iOS 產品（iPhone、iPad）。但看待這個問題的方式有點不同，它使開發人員從限制或控制如何交付媒體的專有交付平臺中解放出來。畢竟，這是開放標準的目的所在。
?
最后，HTML5 不是外來的技術，它是HTML 的最新修訂版。這意味著 JavaScript 和 CSS 能夠與它很好地協作。與現有的 HTML 源代碼一樣，開發人員可以在客戶端或服務器端操作這些代碼。
?
視頻編解碼器
前文已經提到，HTML5 視頻最大的挑戰是在多個編碼解碼器中準備和納入您的內容。目前，每個瀏覽器有其自己的首選視頻格式。非無縫實現的 HTML5 視頻將會變得更糟。
?
現在視頻編碼有三種選擇：
- H.264 – 一種可以利用硬件加速的流行格式，由桌面和設備的圖形芯片提供支持；也是市場上許多較新的視頻和移動設備的默認錄制格式；但是，該格式是有專利的，雖然對非商業用途仍然免費，但它很復雜，也比較昂貴。請參考 此文檔 了解更詳細信息。何時進行商業內容分發。支持：IE 9、Safari 3.1 和 Chrome（目前）
- Ogg Theora – 一個開放標準，沒有專利問題，是免費的。支持：Firefox 3.5、Chrome 4、Opera 10.5。
- VP8 (WebM) – 一個較新的標準，最近被 Google 收購，并作為一個開源發布，免費（但仍有專利）的格式。支持：Firefox 4.0、Chrome 6.0、Opera 10.6。
下圖可讓您更容易了解此內容：
圖 1.1
?
Chrome 值得特別一提，因為 Google 實際將刪除對三種 HTML5 視頻格式之一的支持。收購 On2（WebM 格式的開發商和贊助商）后，Google 宣布以后的 Chrome 的版本將不再支持 H.264。他們已經根據 BSD 許可證發布了 WebM，授予全球用戶免費、非獨占的、免版稅的專利許可。雖然 Chrome 是目前唯一支持所有三種格式的瀏覽器，但市場將會很快分成兩個 OS 默認的瀏覽器陣營，只支持 H.264 的 ?Internet Explorer 和 Safari，以及支持除 H.264 外其他標準的所有其他瀏覽器。
?
嚴重警告：為了簡化此處的討論，本說明不深入探討三種基本格式之間的差異。一旦涉及視頻和音頻配置文件的不同可能性，以及視頻和音頻容器和編解碼器 之間的區別，事情會變得更加復雜。例如，雖然 iPhone 4 用 H.264 格式錄制視頻，但不能將該視頻直接放到 HTML5 網站；必須先通過轉換器運行它。
?
最好能有一個無所不包的公告，說明視頻標準X 是普遍支持的，應該作為HTML5 視頻的首選格式。不幸的是，正如您從上文看到的，情況并非如此。如果您包括用戶驅動的瀏覽器擴展，那么支持最廣泛的格式就是 Ogg Theora。但是，你不能假定用戶，特別是公司工作場所中的用戶，只是為了觀看 HTML5 視頻就擁有安裝其他視頻編解碼器或瀏覽器擴展的知識或能力。如果出于某種原因，您必須選擇某一個視頻編解碼器，應該選擇哪一個？這不一定。考慮以下選擇：
?
H.264
在這三個標準中，H.264 最具人氣，質量可靠，受到了媒體專業人士的認可。它還受到一些業內最大公司的支持，包括Microsoft 和蘋果，具有MPEG LA 的授權。因此也有個最主要的問題：H.264 不是免費的。
對于消費者來說，它當然是免費的。大部分開發人員都不用擔心授權問題（ 目前 ）。但是，視頻分發網站就不一定了。H.264 專利授權的來龍去脈超出了本文的范圍（ 而且很容易讓人糊涂 ），只要說大家有很多問題就夠了。
?
對于大多數開發人員，專利問題將很大程度上歸結于 開放標準 和圖像質量之間的哲學爭論。與 Ogg（參見下文）和VP8 ( WebM ) 相比，H.264 提供了更高的圖像質量和更好的媒體流。由于包括 PC 和移動設備等多種平臺上都具有硬件加速功能，它還具備性能優勢。
?
最后，考慮易生產性，這不是一個無關緊要的問題。所有主要的視頻編輯器，包括 Final Cut、Adobe Premiere 和 Avid，都導出為 H.264 格式。Ogg Theora 或 VP8 則不行。如果您的商店生產自己的視頻，并且數量眾多，那么僅使用 H.264 將節省很多工作。
?
Ogg Theora
Ogg 是唯一一個真正沒有專利負擔的標準。但是，也可以說是 質量最低 的標準，雖然相差其實不多。與H.264 的多次 短兵 相接 發現，H.264 仍占上風。雖然 Ogg 可將內容編碼為更緊湊的文件，但它產生的圖像品質比 H.264 的要低，并且在媒體流能力上會更差。
?
VP8 (WebM)
在高質量但存在專利問題 (H.264) 和質量較差但免費 (Ogg) 這兩個極端之間，VP8 占有一席之地，它可能三個標準中最具爭議的一個。到目前為止，測試表明 H.264 提供的視頻品質比? VP8 ?略高，但這種差異在大多數商業活動中可以忽略不計。
?
更大的問題在于開放標準。一方認為，Google 遠離了 H.264 轉而支持其“開放” WebM 標準 ，甚至在 Creative Commons 許可證下發布了 WebM。另一方面，有很多人爭論說，在這種情況下，“開放” 可能不是真正意義上的“開放” 。以 JPEG 訴訟為例， Microsoft 指出 ，即使 WebM 不會出現 Google 引起的專利問題，如果沒有 Google 明確的用戶免責申明，許多公司和個人部署 WebM 視頻時，都有可能讓自己面臨 MPEG LA 的專利侵權訴訟。
?
總之，在大多數情況下，沒有一種辦法能滿足所有情況下所有項目的需要。但對于大多數情況下的大多數項目，您可能都希望使用 H.264。它不僅僅是生產和消費端使用最廣泛的格式，而且由于硬件加速而具有明顯的性能優勢。對于商業的視頻網站，為了開拓新市場，可能必須咬緊牙關支 付龐大的許可費。
?
但是，這場辯論往往由于一個主要因素而無果而終：現在或在不久的將來，所有瀏覽器是否都支持 HTML5。但是，并非所有瀏覽器都支持所有編解碼器。就像您不會編寫在 IE 中看起來不錯，但在 Firefox 中一團糟的樣式表一樣，您希望創建跨平臺兼容的視頻標簽。
?
視頻轉換器
對于開發人員，這意味著在實際情況下需要將視頻內容至少編碼為兩種視頻格式（最好是三個）才能符合 HTML5 規范的要求。幸運的是，有幾個工具隨時可以幫助您完成此任務。
?
Miro Video Converter ：您的主要工具，此開放源代碼轉換器有 Mac 和 Windows 版本，可以將幾乎所有視頻源轉換為所有可能要使用的 HTML5 格式，以及幾個其他設備和平臺特定的格式。
?
Handbrake ：另一種用于 Mac 和 Windows（和 Linux）的開放源代碼轉換器，Handbrake 是專門轉換為 H.264 的出色工具。
?
MPEG Streamclip () ：MPEG Streamclip 雖然是不開放源代碼，但Mac 和 Windows 用戶可以免費使用。它也處理 lH.264，同時它也可以轉換為 HTML5 規范之外的許多其他有用格式。
?
Firefogg ：一種專業工具，Firefogg 是一個 Firefox 擴展，只能將視頻轉換為 Ogg 的格式，并因此得名。要使用它，需要先下載 Firefox，然后再安裝擴展。
?
<video>標記
您應該會記得，HTML5 在嵌入視頻時本質上歸結為使用一個標記：<video>。但正如其他 HTML 標記一樣，有很多參數選項。以下是標記本身中的一些要點：
?
src ：視頻源的位置和名稱，它的工作原理與 <img> 標記的 src 參數相同。但是要注意，在這里不是識別視頻源，您可以并且也應該在標記外部識別（參見下文）。
<video id="sampleMovie" src="HTML5Sample.mov"></video>
?
width和height ：（可選）視頻的尺寸。更準確地說，這是視頻幀寬度和高度，而不是視頻本身。與 <img> 相似，省去此選項將導致瀏覽器使用視頻源的默認尺寸。但是與 <img> 不同的是，使用與源不同的大小將縮放視頻，而不是扭曲它。換句話說，嵌入的視頻將保留其源的比率。如果您指定的大小小于源，整個視頻將會縮小。但是，如果 您指定的大小大于源，視頻將以其原始大小顯示，所指定尺寸的其余部分將使用空白區域填充。
<video id="sampleMovie" src="HTML5Sample.mov" width=”640” height=”360”></video>
?
controls ：添加默認視頻控件覆蓋。如果您不想創建自己的自定義控件，這是非常有用的。但是，如果想深入 研究自定義播放器控件，可以使用 JavaScript 和 CSS。該規范允許操作 play ()、pause()、currentTime、volume、muted 等方法和屬性。
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
?
preload ：只要用戶點擊頁面就開始下載視頻。要指示預加載視頻，只需包括該屬性。要指示其不預加載，將該屬性設置為等于"none"。
<video id="sampleMovie" src="HTML5Sample.mov" preload></video>
<video id="sampleMovie" src="HTML5Sample.mov" preload=”none”></video>
?
autoplay ：流氓參數。該參數指示瀏覽器加載頁面時就播放視頻。不要使用它。
<video id="sampleMovie" src="HTML5Sample.mov" autoplay></video>
接下來是見證奇跡的時刻。HTML5 規范包括一個方便的古怪功能，可以彌補當前圍繞視頻格式所發生的瀏覽器功能障礙。不使用 src 屬性指定視頻源，您可以在<video> 標記中嵌套多個標記，每個都有不同的視頻源。瀏覽器將自動瀏覽列表并選擇第一個能夠播放的視頻。例如：
<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 中測試該代碼，將獲得 H.264 視頻。但是在 Firefox 中運行它，會在相同的地方看到 Ogg 視頻。
?
理想情況下，雖然不是所有瀏覽器都絕對需要，您應該在 type 參數中包括 MIME 類型，確保與所有的瀏覽器兼容。此參數應指定視頻類型，以及視頻和音頻編解碼器。參數的細節取決于視頻的編碼方式。在這里可以找到很多可能的方案： 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>
?
有關正在使用的所有三種視頻類型的示例，請訪問 我的站點 。
在此頁面上，您會看到三個不同視頻的源代碼：H.264、Ogg 和 WebPM。視頻本身標有它們的編解碼器，以便您查看瀏覽器中顯示的內容。
?
關于 MIME 類型的一個小竅門：您的服務器需要配置為可識別各種類型。對于 Windows Server，這意味著將不同的 MIME 類型項添加到 IIS。對于 Apache 服務器，您需要將? AddType 指令 添加到 httpd.conf 或本地 .htaccess 文件中：
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
?
優雅降級
雖然完整的多源 <video> 標記可在多個 HTML5 就緒的瀏覽器上工作，但它仍然沒有解決舊的、HTML5 之前的瀏覽器問題。幸運的是，該規范包括一個向下兼容機制。
?
將目前正在使用的任何<object> 標記，或者將使用的 HTML5 之前的標記，添加到 <source> 參數列表的底部。通常情況下，此對象將指定您使用的播放器（假定是第三方插件），以及該播放器的參數和源。下例使用流行的免費第三方播放器 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>
?
這篇精彩文章更詳細地解釋了這一點：Kroc Camen “ Video for Everybody "。您還可以從這里查找包含所有三種視頻格式和 flash 對象的代碼生成器：Jonathan Neal 的 “ Video for Everybody Generator ”。
?
資源
查看以下內容，了解HTML5 視頻的更多信息，包括特定編解碼器的復雜性：
- 5 Things You Need to Know about HTML5 Video and Audio ?– 如何快速地在您的網站上瀏覽高清視頻
- Dive Into HTML5 ?– 有關一般的 HTML5 和視頻學習的重要資源
- Video Support Demo ?–比較不同視頻編解碼器（包括瀏覽器插件）的網站
- Wiki Commons: Converting Video ?– 關于 Ogg Theora 的更多內容，包括音頻和視頻編解碼器、播放器和轉換器
- Google 放棄了對 H.264 的支持
- H.264 and WebM ?– 一篇有趣的報道，關于相互競爭的編解碼器標準和瀏覽器制造商的觀點
via： Justin Whitney
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
