共支持三種格式： Ogg、MPEG4、WebM。但這三種格式對(duì)于瀏覽器的兼容性卻各不同。

格式 IE Firefox Opera Chrome Safari

Ogg No 3.5+ 10.5+ 5.0+ No

MPEG4 9.0+ No No 5.0+ 3.0+

WebM No 4.0+ 10.6+ 6.0+ No

• 1
• 2
• 3
• 4

NO：代表不支持這款瀏覽器。

X.0+：表示支持這款及版本更高的瀏覽器。

這些大家應(yīng)該都知道，所以這個(gè)不是我說(shuō)的重點(diǎn)

下面來(lái)說(shuō)一下我今天做項(xiàng)目遇到的問(wèn)題：

我在項(xiàng)目中需要插入一段視頻，視頻是甲方提供的，當(dāng)時(shí)我們寫(xiě)的要求是提供一個(gè)mp4格式的就可以了。甲方提供的也確實(shí)是MP4格式的，但是瀏覽器竟然不支持。這個(gè)是為什么？不是說(shuō)好的支持MP4格式的嗎？然后我開(kāi)始查資料，才明白原來(lái)MP4只是一個(gè)容器，里面還有一個(gè)叫編碼器的東西。格式雖然都是MP4但是html中只支持H.264的編碼格式。所以要用軟件來(lái)轉(zhuǎn)碼。軟件我已經(jīng)上傳到資源里面了。感興趣的可以下載看看。

關(guān)于標(biāo)簽所支持的視頻格式和編碼：

MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器

WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器

Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器

使用方法（以MP4為例）

第一步

第二步

第三步

好程序員web前端分享HTML5 video事件應(yīng)用示例，使用 onloadedmetadata 事件獲取視頻的時(shí)間長(zhǎng)度，使用 ontimeupdate 事件獲取視頻當(dāng)前播放的進(jìn)度，示例代碼如下：

1、獲取視頻時(shí)間長(zhǎng)度

當(dāng)視頻載入video后，使用 onloadedmetadata 事件獲取視頻的時(shí)間長(zhǎng)度。

代碼如下:

video.onloadedmetadata = function () {

var vLength = video.duration;

console.log(vLength);

}

2、當(dāng)前視頻的播放進(jìn)度

當(dāng)視頻開(kāi)始播放時(shí)，可以使用 ontimeupdate 事件獲取視頻當(dāng)前播放的進(jìn)度。當(dāng)video對(duì)象的 currentTime 屬性發(fā)生改變時(shí)觸發(fā) ontimeupdate 事件。currentTime 屬性是浮點(diǎn)小數(shù)，可取到 12 位數(shù)的小數(shù)位數(shù)。

代碼如下:

video.ontimeupdate = function () {

var vTime = video.currentTime;

console.log(vTime);

};