介紹在<video>裡可以放置的特性(Attributes)-
control
preload
loop
muted
control
指定是否顯示控制面板,可以在影片畫面操控影片的使用者介面。
包括播放/暫停鍵、track bar、volume調整器等。
控制面板的選單會隨著網頁瀏覽器而有不同。
用source標籤指定視訊格式,讓瀏覽器選擇播放。
用法:
<video controls="controls">
<source src="test.mp4" type="video/mp4" />
<source src="test.ogg" type="video/ogg" />
<source src="test.webm" type="video/webm" />
</video>
也可以直接省略="controls" 寫成
<video controls >
<source src="test.mp4" type="video/mp4" />
<source src="test.ogg" type="video/ogg" />
<source src="test.webm" type="video/webm" />
</video>
<video
src="http://progressive.totaleclips.com.edgesuite.net/105/e105598_257.mp4"
controls></video>
開發者也可以不使用瀏覽器預設的外觀,自定義樣式。
可以針對標籤自訂播放介面,用Javascript控制播放,CSS設計面板外觀
preload
指定視訊或音樂是否預先下載。
如果預先下載,瀏覽器會將視訊或音訊數據進行緩衝,讓影片在背景下載,可以加快播放的速度。
此屬性有三個可選擇的值:
auto(預設)-自動預先下載全部視訊和音訊
none-不預先下載
metadata-
用法:
<video
src="http://progressive.totaleclips.com.edgesuite.net/105/e105598_257.mp4" preload="auto"></video>
loop
指定是否重複播放視訊或音訊
用法:
<video
src="http://progressive.totaleclips.com.edgesuite.net/105/e105598_257.mp4" autoplay loop></video>
muted
指定載入的影片靜音
<video
src="http://progressive.totaleclips.com.edgesuite.net/105/e105598_257.mp4" width="500" height="500" muted="muted"></video>