1. 程式人生 > >HTML5video視訊標籤全屬性詳解

HTML5video視訊標籤全屬性詳解

controls

controls屬性是一個布林屬性。可以有,也可以沒有。如果有這個屬性,瀏覽器就會為視訊顯示增加內建的控制元件。不同瀏覽器提供的控制元件有所不同,所以要檢視瀏覽器,看看會有哪些控制元件。這是Safair上提供的控制元件。

autoplay

autoplay布林屬性告訴瀏覽器:一旦有了足夠的資料就開始播放視訊。你可能會看到,視訊幾乎立即開始播放

src

src屬性與<img>元素的src很類似,這是一個URL,告訴video元素在哪裡查詢原始檔。

preload

屬性preload通常用於細粒度地控制視訊如何載入,來實現優化,大多數情況下,瀏覽器會根據是否設定autoplay以及使用者的頻寬來選擇載入多少視訊。可以覆蓋這種設定,將preload設定為“none”(在使用者真正“播放”視訊之前不下載視訊),也可以設定為“metadata”(下載視訊元資料,但不下載視訊內容),或者可以設定為“auto”讓瀏覽器來做決定。

poster

瀏覽器通常會把視訊的一幀顯示為“海報”影象,來表示這個視訊。如果你刪除了autoplay屬性,單機播放之前就會看到這個影象。要由瀏覽器來選擇顯示哪一幀。通常,瀏覽器會顯示視訊的第一幀……這往往是一個黑屏。如果你想顯示某個特定的影象,要由你來建立想顯示的影象,並使用poster屬性來指定

width,height

width和height屬性會設定視訊顯示區(也稱為“視窗”)的寬度和高度。如果指定了一個海報(poster),海報圖象會縮放到你指定的寬度和高度。視訊也會縮放,不過會保持其寬高比(例如,4:3或16:9),所以,如果兩邊或者上下邊有多餘的空間,視訊會採用上下加黑邊(letter-boxed)或左右加黑邊(pillar-boxed)的模式來適應顯示區大小。如果你想得到最佳的效能,就應該儘量採用視訊原本的尺寸(這樣的瀏覽器就不用實時縮放視訊了)。

loop

這也是一個布林屬性,如果有loop屬性,視訊結束播放之後會自動重新開始播放視訊。