2 Video標(biāo)簽的使用
Video標(biāo)簽含有src、poster、preload、autoplay、loop、controls、width、height等幾個(gè)屬性,以及一個(gè)內(nèi)部使用的標(biāo)簽<source>。
Video標(biāo)簽內(nèi)除了可以包含<source>標(biāo)簽外,還可以包含當(dāng)指定的視頻都不能播放時(shí),返回的內(nèi)容。
2.1 src屬性和poster屬性
你能想象src屬性是用來干啥的。跟<img>標(biāo)簽的一樣,這個(gè)屬性用于指定視頻的地址。
而poster屬性用于指定一張圖片,在當(dāng)前視頻數(shù)據(jù)無效時(shí)顯示(預(yù)覽圖)。視頻數(shù)據(jù)無效可能是視頻正在加載,可能是視頻地址錯(cuò)誤等等。
2.2 preload屬性
這個(gè)屬性也能通過名字了解用處,此屬性用于定義視頻是否預(yù)加載。屬性有三個(gè)可選擇的值:none、metadata、auto。如果不使用此屬性,默認(rèn)為auto。
None:不進(jìn)行預(yù)加載。使用此屬性值,可能是頁面制作者認(rèn)為用戶不期望此視頻,或者減少HTTP請求。
Metadata:部分預(yù)加載。使用此屬性值,代表頁面制作者認(rèn)為用戶不期望此視頻,但為用戶提供一些元數(shù)據(jù)(包括尺寸,第一幀,曲目列表,持續(xù)時(shí)間等等)。
Auto:全部預(yù)加載。
2.3 autoplay屬性
又是一個(gè)看名字知道用處的屬性。Autoplay屬性用于設(shè)置視頻是否自動播放,是一個(gè)布爾屬性。當(dāng)出現(xiàn)時(shí),表示自動播放,去掉是表示不自動播放。
注意,HTML中布爾屬性的值不是true和false。正確的用法是,在標(biāo)簽中使用此屬性表示true,此時(shí)屬性要么沒有值,要么其值恒等于他的名字(此處,自動播放為<video autoplay />或者<video autoplay=”autoplay” />);而在標(biāo)簽中不使用此屬性表示false(此處不進(jìn)行自動播放為<video />)。
2.4 loop屬性
一目了然,loop屬性用于指定視頻是否循環(huán)播放,同樣是一個(gè)布爾屬性。
2.5 controls屬性
Controls屬性用于向?yàn)g覽器指明頁面制作者沒有使用腳本生成播放控制器,需要瀏覽器啟用本身的播放控制欄。
控制欄須包括播放暫停控制,播放進(jìn)度控制,音量控制等等。
出處:騰訊互娛設(shè)計(jì)團(tuán)隊(duì)
責(zé)任編輯:bluehearts
上一頁 HTML 5 Video概述 [1] 下一頁 HTML 5 Video概述 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。
|