日本亚洲欧美日韩精品,久久久91精品国产一区蜜桃网站,91麻豆精品国产91久久久久久

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

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

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

HTML5 的復(fù)雜性與語(yǔ)法無(wú)關(guān)，而是源自瀏覽器支持和視頻編碼。Web 開(kāi)發(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ī)范中目前還沒(méi)有包括全屏播放。目前只有幾個(gè)瀏覽器（不是全部）支持全屏播放。

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

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

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

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

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

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

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

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

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

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

視頻編解碼器

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

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

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（目前）
Ogg Theora – 一個(gè)開(kāi)放標(biāo)準(zhǔn)，沒(méi)有專利問(wèn)題，是免費(fèi)的。支持：Firefox 3.5、Chrome 4、Opera 10.5。
VP8 (WebM) – 一個(gè)較新的標(biāo)準(zhǔn)，最近被 Google 收購(gòu)，并作為一個(gè)開(kāi)源發(fā)布，免費(fèi)（但仍有專利）的格式。支持：Firefox 4.0、Chrome 6.0、Opera 10.6。

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

各瀏覽器對(duì)HTML5視頻解碼的支持情況

圖 1.1

Chrome 值得特別一提，因?yàn)?Google 實(shí)際將刪除對(duì)三種 HTML5 視頻格式之一的支持。收購(gòu) On2（WebM 格式的開(kāi)發(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)化此處的討論，本說(shuō)明不深入探討三種基本格式之間的差異。一旦涉及視頻和音頻配置文件的不同可能性，以及視頻和音頻容器和編解碼器之間的區(qū)別，事情會(huì)變得更加復(fù)雜。例如，雖然 iPhone 4 用 H.264 格式錄制視頻，但不能將該視頻直接放到 HTML5 網(wǎng)站；必須先通過(guò)轉(zhuǎn)換器運(yùn)行它。

最好能有一個(gè)無(wú)所不包的公告，說(shuō)明視頻標(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 和蘋(píng)果，具有MPEG LA 的授權(quán)。因此也有個(gè)最主要的問(wèn)題：H.264 不是免費(fèi)的。

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

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

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

Ogg Theora

Ogg 是唯一一個(gè)真正沒(méi)有專利負(fù)擔(dān)的標(biāo)準(zhǔn)。但是，也可以說(shuō)是質(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ì)量但存在專利問(wèn)題 (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ì)。

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

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

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

視頻轉(zhuǎn)換器

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

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

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

MPEG Streamclip ()：MPEG Streamclip 雖然是不開(kāi)放源代碼，但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í)別（參見(jiàn)下文）。

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

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

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

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

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

</video>

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

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

</video>

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

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

關(guān)于 MIME 類型的一個(gè)小竅門(mén)：您的服務(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 就緒的瀏覽器上工作，但它仍然沒(méi)有解決舊的、HTML5 之前的瀏覽器問(wèn)題。幸運(yùn)的是，該規(guī)范包括一個(gè)向下兼容機(jī)制。

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

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

一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

如何使用HTML5嵌入視頻

如何使用HTML5嵌入視頻