Video標(biāo)簽的使用
Video標(biāo)簽含有src、poster胚嘲、preload作儿、autoplay、loop馋劈、controls攻锰、width、height等幾個(gè)屬性妓雾,
以及一個(gè)內(nèi)部使用的標(biāo)簽娶吞。Video標(biāo)簽內(nèi)除了可以包含標(biāo)簽外,還可以包含當(dāng)指定的視頻都不能
播放時(shí)械姻,返回的內(nèi)容妒蛇。
(1) src屬性和poster屬性
你能想象src屬性是用來(lái)干啥的。跟
標(biāo)簽的一樣楷拳,這個(gè)屬性用于指定視頻的地址绣夺。而poster屬性用于指定一張圖片,在當(dāng)前視頻數(shù)據(jù)無(wú)效時(shí)顯示(預(yù)覽圖)欢揖。視頻數(shù)據(jù)無(wú)效可能是視頻正在加載陶耍,可能是視頻地址錯(cuò)誤等等。
(2) preload屬性
這個(gè)屬性也能通過(guò)名字了解用處她混,此屬性用于定義視頻是否預(yù)加載烈钞。屬性有三個(gè)可選擇的
值:none泊碑、metadata、auto毯欣。如果不使用此屬性馒过,默認(rèn)為auto。
None:不進(jìn)行預(yù)加載仪媒。使用此屬性值沉桌,可能是頁(yè)面制作者認(rèn)為用戶(hù)不期望此視頻,或者減少HTTP請(qǐng)求算吩。
Metadata:部分預(yù)加載留凭。使用此屬性值,代表頁(yè)面制作者認(rèn)為用戶(hù)不期望此視頻偎巢,但為用戶(hù)提供一些元數(shù)據(jù)(包括尺寸蔼夜,第一幀,曲目列表压昼,持續(xù)時(shí)間等等)求冷。
Auto:全部預(yù)加載。
(3) autoplay屬性
又是一個(gè)看名字知道用處的屬性窍霞。Autoplay屬性用于設(shè)置視頻是否自動(dòng)播放匠题,是一個(gè)布爾屬性。當(dāng)出現(xiàn)時(shí)但金,表示自動(dòng)播放韭山,去掉是表示不自動(dòng)播放。
注意冷溃,HTML中布爾屬性的值不是true和false钱磅。正確的用法是,在標(biāo)簽中使用此屬性表示true似枕,此時(shí)屬性要么沒(méi)有值盖淡,要么其值恒等于他的名字(此處,自動(dòng)播放為或者/>)凿歼;而在標(biāo)簽中不使用性表示false(此處不進(jìn)行自動(dòng)播放為)褪迟。
(4) loop屬性
一目了然,loop屬性用于指定視頻是否循環(huán)播放毅往,同樣是一個(gè)布爾屬性牵咙。
(5) controls屬性
Controls屬性用于向?yàn)g覽器指明頁(yè)面制作者沒(méi)有使用腳本生成播放控制器,需要瀏覽器啟用本身的播放控制欄攀唯。
控制欄須包括播放暫徒嘧溃控制,播放進(jìn)度控制侯嘀,音量控制等等另凌。
每個(gè)瀏覽器默認(rèn)的播放控制欄在界面上不一樣谱轨。由于我瀏覽器的詭異問(wèn)題,F(xiàn)irefox和Safari的Video標(biāo)簽不正常吠谢,所以這兩個(gè)只能在網(wǎng)上找截圖了土童。
(6) width屬性和height屬性
屬于標(biāo)簽的通用屬性了,這個(gè)不用多說(shuō)工坊。
(7) source標(biāo)簽
Source標(biāo)簽用于給媒體(因?yàn)閍udio標(biāo)簽同樣可以包含此標(biāo)簽献汗,所以這兒用媒體,而不是視頻)指定多個(gè)可選擇的(瀏覽器最終只能選一個(gè))文件地址王污,且只能在媒體標(biāo)簽沒(méi)有使用src屬性時(shí)使用罢吃。
瀏覽器按source標(biāo)簽的順序檢測(cè)標(biāo)簽指定的視頻是否能夠播放(可能是視頻格式不支持,視頻不存在等等)昭齐,如果不能播放尿招,換下一個(gè)。此方法多用于兼容不同的瀏覽器阱驾。Source標(biāo)簽本身不代表任何含義就谜,不能單獨(dú)出現(xiàn)。
此標(biāo)簽包含src里覆、type丧荐、media三個(gè)屬性。
src屬性:用于指定媒體的地址喧枷,和video標(biāo)簽的一樣篮奄。
Type屬性:用于說(shuō)明src屬性指定媒體的類(lèi)型,幫助瀏覽器在獲取媒體前判斷是否支持此類(lèi)別的媒體格式割去。
Media屬性:用于說(shuō)明媒體在何種媒介中使用,不設(shè)置時(shí)默認(rèn)值為all昼丑,表示支持所有媒介呻逆。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?