html5中video標(biāo)簽的使用

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昼丑,表示支持所有媒介呻逆。


? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市菩帝,隨后出現(xiàn)的幾起案子咖城,更是在濱河造成了極大的恐慌,老刑警劉巖呼奢,帶你破解...
    沈念sama閱讀 212,222評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宜雀,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡握础,警方通過(guò)查閱死者的電腦和手機(jī)辐董,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)禀综,“玉大人简烘,你說(shuō)我怎么就攤上這事苔严。” “怎么了孤澎?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,720評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵届氢,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我覆旭,道長(zhǎng)退子,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,568評(píng)論 1 284
  • 正文 為了忘掉前任型将,我火速辦了婚禮寂祥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘茶敏。我一直安慰自己壤靶,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,696評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布惊搏。 她就那樣靜靜地躺著贮乳,像睡著了一般。 火紅的嫁衣襯著肌膚如雪恬惯。 梳的紋絲不亂的頭發(fā)上向拆,一...
    開(kāi)封第一講書(shū)人閱讀 49,879評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音酪耳,去河邊找鬼浓恳。 笑死,一個(gè)胖子當(dāng)著我的面吹牛碗暗,可吹牛的內(nèi)容都是我干的颈将。 我是一名探鬼主播,決...
    沈念sama閱讀 39,028評(píng)論 3 409
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼言疗,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼晴圾!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起噪奄,我...
    開(kāi)封第一講書(shū)人閱讀 37,773評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤死姚,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后勤篮,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體都毒,經(jīng)...
    沈念sama閱讀 44,220評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,550評(píng)論 2 327
  • 正文 我和宋清朗相戀三年碰缔,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了账劲。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,697評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖涤垫,靈堂內(nèi)的尸體忽然破棺而出姑尺,到底是詐尸還是另有隱情,我是刑警寧澤蝠猬,帶...
    沈念sama閱讀 34,360評(píng)論 4 332
  • 正文 年R本政府宣布切蟋,位于F島的核電站,受9級(jí)特大地震影響榆芦,放射性物質(zhì)發(fā)生泄漏柄粹。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,002評(píng)論 3 315
  • 文/蒙蒙 一匆绣、第九天 我趴在偏房一處隱蔽的房頂上張望驻右。 院中可真熱鬧,春花似錦崎淳、人聲如沸堪夭。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,782評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)森爽。三九已至,卻和暖如春嚣镜,著一層夾襖步出監(jiān)牢的瞬間爬迟,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,010評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工菊匿, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留付呕,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,433評(píng)論 2 360
  • 正文 我出身青樓跌捆,卻偏偏與公主長(zhǎng)得像徽职,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子佩厚,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,587評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理活箕,服務(wù)發(fā)現(xiàn),斷路器可款,智...
    卡卡羅2017閱讀 134,633評(píng)論 18 139
  • Video標(biāo)簽含有 src 、poster克蚂、preload闺鲸、autoplay、loop埃叭、controls摸恍、widt...
    奮斗的小廢魚(yú)閱讀 1,307評(píng)論 0 0
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說(shuō)明:指定了 HTML 文檔遵循的文檔類(lèi)型定義(D...
    米塔塔閱讀 3,229評(píng)論 1 41
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,813評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件立镶、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,066評(píng)論 4 62