HTML 5 如何添加視頻

字號：小大 2012-09-20 16:23:26 來源：炎黃科技上一條下一條

Web 上的視頻

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

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

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

當前，video 元素支持三種視頻格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

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

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

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

control 屬性供添加播放、暫停和音量控件。

包含寬度和高度屬性也是不錯的主意。之間插入的內(nèi)容是供不支持 video 元素的瀏覽器顯示的：

上面的例子使用一個 Ogg 文件，適用于Firefox、Opera 以及 Chrome 瀏覽器。

要確保適用于 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。

video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：

Internet Explorer 8 不支持 video 元素。在 IE 9 中，將提供對使用 MPEG4 的 video 元素的支持。

屬性	值	描述
autoplay	autoplay	如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
controls	controls	如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
height	pixels	設(shè)置視頻播放器的高度。
loop	loop	如果出現(xiàn)該屬性，則當媒介文件完成播放后再次開始播放。
preload	preload	如果出現(xiàn)該屬性，則視頻在頁面加載時進行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。
src	url	要播放的視頻的 URL。
width	pixels	設(shè)置視頻播放器的寬度。