HTML5視訊video

直到現在，仍然不存在一項旨在網頁上顯示視訊的标準。

目前，大多數視訊是通過插件（比如 flash）來顯示的。然而，并非所有浏覽器都擁有同樣的插件。

html5 規定了一種通過 video 元素來包含視訊的标準方法。

目前html5隻支援三種格式的視訊。

格式

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 檔案

開發例子源碼如下：

解釋：

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

2、<video> 與 </video> 之間插入的内容是供不支援 video 元素的浏覽器顯示的。

3、video 元素允許多個 source 元素。source 元素可以連結不同的視訊檔案。浏覽器将使用第一個可識别的格式

支援的部分屬性列舉：

屬性

值

描述

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

autoplay

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

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

controls

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

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

pixels

設定視訊播放器的高度。

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

loop

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

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

preload

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

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

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

url

要播放的視訊的 url。

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

設定視訊播放器的寬度。

歡迎大家關注我的部落格！如有疑問,請加qq群：135430763共同學習！