HTML5 Video(視頻)

HTML5?Video(視頻)

Web站點(diǎn)上的視頻

直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁上顯示視頻的標(biāo)準(zhǔn)。

今天，大多數(shù)視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。

HTML5 規(guī)定了一種通過 video 元素來包含視頻的標(biāo)準(zhǔn)方法。

HTML5 (視頻)- 如何工作

如需在 HTML5 中顯示視頻，您所有需要的是：

實(shí)例

<video width="320" height="240" controls>
  <source src="視頻文件名稱" type="視頻格式">
  <source src="視頻文件名稱" type="視頻格式">
您的瀏覽器不支持Video標(biāo)簽。
</video>

autoplay 屬性

實(shí)例

設(shè)置為自動(dòng)播放的 video 元素：

<video controls="controls" autoplay="autoplay"> 
 <source src="視頻文件名稱" type="視頻格式"> 
  <source src="視頻文件名稱" type="視頻格式">
您的瀏覽器不支持Video標(biāo)簽。
</video>

controls： ? ?如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。 ? ?

<video> 元素提供了播放、暫停和音量控件來控制視頻。

同時(shí)<video> 元素元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設(shè)置的高度和寬度，所需的視頻空間會(huì)在頁面加載時(shí)保留。。如果沒有設(shè)置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時(shí)保留特定的空間，頁面就會(huì)根據(jù)原始視頻的大小而改變。

<video> 與</video> 標(biāo)簽之間插入的內(nèi)容是提供給不支持 video 元素的瀏覽器顯示的。

<video> 元素支持多個(gè) <source> 元素. <source> 元素可以鏈接不同的視頻文件。

視頻格式與瀏覽器的支持

當(dāng)前， <video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg:

瀏覽器 ? ? ? ? ? ? ? ? ? ? MP4 ? ? ? ? ? ? ?WebM ? ? ? ? ? ? ? ? ? ?Ogg

Internet Explorer ? ?YES ? ? ? ? ? ? ? ? ? NO ? ? ? ? ? ? ? ? ? ? ?NO ? ?

Chrome ? ? ? ? ? ? ? ? ?YES ? ? ? ? ? ? ? ? ? YES ? ? ? ? ? ? ? ? ? ? ?YES ? ?

Firefox ? ? ? ? ? ? ? ? ? ?YES ? ? ? ? ? ? ? ? ? YES ? ? ? ? ? ? ? ? ? ? ?YES ? ?

Safari ? ? ? ? ? ? ? ? ? ? ?YES ? ? ? ? ? ? ? ? ? NO ? ? ? ? ? ? ? ? ? ? ?NO ? ?

Opera ? ? ? YES (從 Opera 25 起) ? ? ?YES ? ? ? ? ? ? ? ? ? ? ?YES ? ?

MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件