天天看點

video标簽的屬性

html5中的video标簽用于播放視訊檔案的,在video标簽中我們可以設定視窗的寬高,視訊的自動播放,循環播放以及視訊的封面圖檔等等

html5是下一代HTML,新增了許多新的标簽,這些标簽實作了許多新的功能。并且還減少了對外部插件的要求同時也可以更好的處理錯誤。比如HTML5中的video标簽就可以很好的實作了在頁面上播放視訊的效果。

<col>

屬性

作用

muted

設定或傳回的音頻、視訊是否應該被靜音

autoplay

視訊在加載後馬上播放

loop

循環播放

width

視訊播放器的寬度

pixels(像素)

height

視訊播放器的高度

pixels

controls

顯示控件,比如播放按鈕

src

播放視訊的url

URL

preload

視訊在界面加載時進行加載,并預備播放。

如果使用autoplay,忽略改屬性

auto

metadata

none

poster

規定視訊正在下載下傳時顯示的圖像,直到使用者點選播放按鈕。

HTML5 video标簽的詳細用法

用于播放視訊檔案,比如電影或其它視訊流。可以在開始标簽和結束标簽之間放置文本内容,這樣做的好處是一些低版本的浏覽器就可以顯示出不支援該标簽的資訊

例:

我們可以給這個視訊自定義寬高來改變它的視窗大小定義寬高

自動播放

我們可以通過設定屬性來讓視訊是否開啟自動播放

(1)使用autoplay屬性可以讓浏覽器加載完後視訊檔案後立即播放

我們還可以在自動播放時設定muted狀态,這樣做的目的是當視訊自動播放時會靜音,而且我們還可以通過點選播放器的揚聲器來開啟聲音

我們可以使用loop屬性讓視訊播放結束時,再從頭開始循環播放。代碼如下所示

預加載媒體檔案

設定preload屬性中的不同屬性值,來告訴浏覽器應該怎樣加載一個媒體檔案:

auto:表示讓浏覽器自動下載下傳整個檔案

none:表示讓浏覽器不必預先下載下傳檔案

metadata:表示讓浏覽器先擷取視訊檔案開頭的資料塊,進而足以确定一些基本資訊(比如視訊的總時長,第一幀圖像等)

設定視訊的封面圖檔

通過poster屬性可以設定視訊的封面圖檔,浏覽器在下面三種情況下會使用這個圖檔:

(1)視訊第一幀未加載完畢

(2)把preload屬性設定為none

(3)沒有找到指定的視訊檔案