html5學習(一) video字段

html5對視訊的支援：

html5通過<video></video>字段實作web頁面上視訊的播放功能。

目前各大浏覽器對<video>字段的支援：

目前，video 元素支援三種視訊格式：

格式

IE

Firefox

Opera

Chrome

Safari

Ogg

No

3.5+

10.5+

5.0+

MPEG 4

9.0+

3.0+

WebM

4.0+

10.6+

6.0+

Ogg = 帶有 Theora 視訊編碼和 Vorbis 音頻編碼的 Ogg 檔案

MPEG4 = 帶有 H.264 視訊編碼和 AAC 音頻編碼的 MPEG 4 檔案

WebM = 帶有 VP8 視訊編碼和 Vorbis 音頻編碼的 WebM 檔案

簡單的html顯示視訊的例子

src:指定視訊資源的位置（包括相對位址以及絕對位址）。

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

此處注意視訊格式

屬性

值

描述

<a href="http://www.w3school.com.cn/html5/att_video_autoplay.asp">autoplay</a>

autoplay

如果出現該屬性，則視訊在就緒後馬上播放。

<a href="http://www.w3school.com.cn/html5/att_video_controls.asp">controls</a>

controls

如果出現該屬性，則向使用者顯示控件，比如播放按鈕。

<a href="http://www.w3school.com.cn/html5/att_video_height.asp">height</a>

pixels

設定視訊播放器的高度。

<a href="http://www.w3school.com.cn/html5/att_video_loop.asp">loop</a>

loop

如果出現該屬性，則當媒介檔案完成播放後再次開始播放。

<a href="http://www.w3school.com.cn/html5/att_video_preload.asp">preload</a>

preload

如果出現該屬性，則視訊在頁面加載時進行加載，并預備播放。

如果使用 "autoplay"，則忽略該屬性。

<a href="http://www.w3school.com.cn/html5/att_video_src.asp">src</a>

url

要播放的視訊的 URL。

<a href="http://www.w3school.com.cn/html5/att_video_width.asp">width</a>

設定視訊播放器的寬度。

方法

事件

play()

currentSrc

play

pause()

currentTime

pause

通過mvideo的play或者pause判斷視訊是否在播放或者暫停。