IDC知識(shí)庫(kù)
IDC領(lǐng)域?qū)I(yè)知識(shí)百科平臺(tái)

網(wǎng)頁(yè)制作視頻代碼

網(wǎng)頁(yè)制作視頻代碼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ò)誤等等。

??<????video?? ??width????=????”658″?????height????=????”444″?? ??src????=????”http://www.youname.com/images/first.mp4″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”????></????video????>??

(2) preload屬性

這個(gè)屬性也能通過(guò)名字了解用處,此屬性用于定義視頻是否預(yù)加載。屬性有三個(gè)可選擇的值:none、metadata、auto。如果不使用此屬性,默認(rèn)為auto。

??<????video?? ??width????=????”658″?????height????=????”444″?? ??src????=????”http://www.youname.com/images/first.mp4″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”?? ??preload????=????”none”????></????video????>??

None:不進(jìn)行預(yù)加載。使用此屬性值,可能是頁(yè)面制作者認(rèn)為用戶不期望此視頻,或者減少HTTP請(qǐng)求。

Metadata:部分預(yù)加載。使用此屬性值,代表頁(yè)面制作者認(rèn)為用戶不期望此視頻,但為用戶提供一些元數(shù)據(jù)(包括尺寸,第一幀,曲目列表,持續(xù)時(shí)間等等)。

Auto:全部預(yù)加載。

(3) autoplay屬性

又是一個(gè)看名字知道用處的屬性。Autoplay屬性用于設(shè)置視頻是否自動(dòng)播放,是一個(gè)布爾屬性。當(dāng)出現(xiàn)時(shí),表示自動(dòng)播放,去掉是表示不自動(dòng)播放。

??<????video?? ??width????=????”658″?????height????=????”444″?? ??src????=????”http://www.youname.com/images/first.mp4″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”?? ??preload????=??http://www.qlyl1688.com/??????”none”????></????video????>??

注意,HTML中布爾屬性的值不是true和false。正確的用法是,在標(biāo)簽中使用此屬性表示true,此時(shí)屬性要么沒(méi)有值,要么其值恒等于他的名字 (此處,自動(dòng)播放為或者);而在標(biāo)簽中不使用此屬性表示false(此處不進(jìn)行自動(dòng)播放為)。

(4) loop屬性

??<????video?? ??width????=????”658″?????height????=????”444″?? ??src????=????”http://www.youname.com/images/first.mp4″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”?? ??loop????=????”loop”????></????video????>??

一目了然,loop屬性用于指定視頻是否循環(huán)播放,同樣是一個(gè)布爾屬性。

(5) controls屬性

??<????video?? ??width????=????”658″?????height????=????”444″?? ??src????=????”http://www.youname.com/images/first.mp4″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”?? ??preload????=????”none”?? ??controls????=????”controls”????></????video????>??

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)簽

??<????video?? ??width????=????”658″?????height????=????”444″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”?? ??preload????=????”none”?? ??controls????=????”controls”????><????source?? ??src????=????”http://www.youname.com/images/first.ogv”????/><????source?? ??src????=????”http://www.youname.com/images/first.ogg”????/></????video????>??

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屬性指定媒體的類型,幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。

Media屬性:用于說(shuō)明媒體在何種媒介中使用,不設(shè)置時(shí)默認(rèn)值為all,表示支持所有媒介。你想到

(8) 一個(gè)完整的例子

??<????video?? ??width????=????”658″?????height????=????”444″?? ??poster????=????”http://www.youname.com/images/first.png”?? ??autoplay????=????”autoplay”?? ??preload????=????”none”?? ??controls????=????”controls”????><????source?? ??src????=????”http://www.youname.com/images/first.ogv”????/> <????source?? ??src????=????”http://www.youname.com/images/first.ogg”????/></????video????>??

這一段編碼在網(wǎng)頁(yè)中界定了一個(gè)視頻,此視頻的瀏覽圖為poster的屬性值,表明電腦瀏覽器的默認(rèn)設(shè)置新聞媒體操縱欄,預(yù)加載視頻的數(shù)據(jù)庫(kù),循環(huán)播放,總寬為900清晰度,高度為240清晰度。 第一挑選視頻詳細(xì)地址為第一個(gè)source標(biāo)識(shí)的src屬性值,視頻類型為Ogg視頻,視頻編號(hào)譯碼器為Theora,音頻編碼譯碼器為Vorbis,播放視頻媒 介為顯示屏;第二挑選視頻詳細(xì)地址不會(huì)再累述。假如你還需要兼容IE得話,能夠在最后一個(gè)source標(biāo)識(shí)后再再加上Flash播放器的標(biāo)簽集,或是應(yīng)用一點(diǎn) JavaScript編碼。
鑷姪寤虹珯
域名頻道一家知名的網(wǎng)站制作、網(wǎng)站優(yōu)化、網(wǎng)站推廣提供商,虛擬主機(jī)的大賣場(chǎng)。
虛擬主機(jī)95%均有贈(zèng)送數(shù)據(jù)庫(kù),一般不需要單獨(dú)購(gòu)買。支持子站的主機(jī),若要開(kāi)設(shè)多個(gè)網(wǎng)站時(shí),默認(rèn)只贈(zèng)送一個(gè)數(shù)據(jù)庫(kù)。
Windows虛擬主機(jī)支持html、ASP、.Net 2.0/3.0/3.5/4.0、Perl 5、WAP 、PHP 5.2/5.3/5.4/5.5,Linux虛擬主機(jī)支持html、PHP 5.2/5.3/5.4/5.5、Perl 5、WAP。
基于微信的外賣-訂座-電子菜單平臺(tái):微餐飲http://http://nrfpj.cn/web/weicanyin.asp

贊(4)
分享到: 更多 (0)

中國(guó)專業(yè)的網(wǎng)站域名及網(wǎng)站空間提供商

買域名買空間