iT邦幫忙

DAY 5
1

只是路過 HTML5 系列 第 5

HTML5的Video標籤(3)

介紹在<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>

上一篇
HTML5的Video標籤(2)
下一篇
HTML Audio/Video Methods
系列文
只是路過 HTML5 30

尚未有邦友留言

立即登入留言