HTML5視訊video

業餘草發表於2014-11-26
HTMLIDE
直到現在，仍然不存在一項旨在網頁上顯示視訊的標準。
目前，大多數視訊是通過外掛（比如 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共同學習！

相關文章