HTML5視頻video,html5video
直到現在,仍然不存在一項旨在網頁上顯示視頻的標準。
目前,大多數視頻是通過外掛程式(比如 Flash)來顯示的。然而,並非所有瀏覽器都擁有同樣的外掛程式。
HTML5 規定了一種通過 video 元素來包含視頻的標準方法。
當前HTML5隻支援三種格式的視頻。
| 格式 |
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 檔案
開發例子源碼如下:
<!DOCTYPE HTML><html><body><video width="320" height="240" controls="controls"><source src="movie.ogg" type="http://www.w3school.com.cn/i/movie.ogg"> <source src="movie.mp4" type="http://www.w3school.com.cn/i/movie.mp4">你的瀏覽器不支援html5的video標籤</video></body></html>
解釋:
1、control 屬性供添加播放、暫停和音量控制項。
2、<video> 與 </video> 之間插入的內容是供不支援 video 元素的瀏覽器顯示的。
3、video 元素允許多個 source 元素。source 元素可以連結不同的視頻檔案。瀏覽器將使用第一個可識別的格式
支援的部分屬性列舉:
| 屬性 |
值 |
描述 |
| autoplay |
autoplay |
如果出現該屬性,則視頻在就緒後馬上播放。 |
| controls |
controls |
如果出現該屬性,則向使用者顯示控制項,比如播放按鈕。 |
| height |
pixels |
設定視頻播放器的高度。 |
| loop |
loop |
如果出現該屬性,則當媒介檔案完成播放後再次開始播放。 |
| preload |
preload |
如果出現該屬性,則視頻在頁面載入時進行載入,並預備播放。 如果使用 "autoplay",則忽略該屬性。 |
| src |
url |
要播放的視頻的 URL。 |
| width |
pixels |
設定視頻播放器的寬度。 |
歡迎大家關注我的部落格!如有疑問,請加QQ群:135430763共同學習!