HTML5中的Video標(biāo)簽如何使用

這篇文章主要介紹“HTML5中的Video標(biāo)簽如何使用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“HTML5中的Video標(biāo)簽如何使用”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)公司公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元梁河做網(wǎng)站,已為上家服務(wù),為梁河各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

網(wǎng)站制作中的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) source標(biāo)簽

Source標(biāo)簽用于給媒體(因?yàn)閍udio標(biāo)簽同樣可以包含此標(biāo)簽，所以這兒用媒體，而不是視頻)指定多個(gè)可選擇的文件地址，且只能在媒體標(biāo)簽沒有使用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屬性：用于說明src屬性指定媒體的類型，幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。

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

(2) preload屬性

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

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

Metadata：部分預(yù)加載。使用此屬性值，代表頁面制作者認(rèn)為用戶不期望此視頻，但為用戶提供一些元數(shù)據(jù)。

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

(3) src屬性和poster屬性

你能想象src屬性是用來干啥的。跟< img >標(biāo)簽的一樣，這個(gè)屬性用于指定視頻的地址。而poster屬性用于指定一張圖片，在當(dāng)前視頻數(shù)據(jù)無效時(shí)顯示(預(yù)覽圖)。視頻數(shù)據(jù)無效可能是視頻正在加載，可能是視頻地址錯(cuò)誤等等。

(4) loop屬性

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

(5) autoplay屬性

又是一個(gè)看名字知道用處的屬性。Autoplay屬性用于設(shè)置視頻是否自動(dòng)播放，是一個(gè)布爾屬性。當(dāng)出現(xiàn)時(shí)，表示自動(dòng)播放，去掉是表示不自動(dòng)播放。注意，HTML中布爾屬性的值不是true和false。正確的用法是，在標(biāo)簽中使用此屬性表示true，此時(shí)屬性要么沒有值，要么其值恒等于他的名字(此處，自動(dòng)播放為< video autoplay />或者< video autoplay=”autoplay” />);而在標(biāo)簽中不使用此屬性表示false(此處不進(jìn)行自動(dòng)播放為< video / >)。

(6) width屬性和height屬性

屬于標(biāo)簽的通用屬性了，這個(gè)不用多說。

(7) controls屬性

Controls屬性用于向?yàn)g覽器指明頁面制作者沒有使用腳本生成播放控制器，需要瀏覽器啟用本身的播放控制欄?？刂茩陧毎úシ艜和？刂疲シ胚M(jìn)度控制，音量控制等等。每個(gè)瀏覽器默認(rèn)的播放控制欄在界面上不一樣。由于我瀏覽器的詭異問題，F(xiàn)irefox和Safari的Video標(biāo)簽不正常，所以這兩個(gè)只能在網(wǎng)上找截圖了。

關(guān)于“HTML5中的Video標(biāo)簽如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

分享標(biāo)題：HTML5中的Video標(biāo)簽如何使用
分享URL：http://bm7419.com/article2/pcidoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、域名注冊(cè)、商城網(wǎng)站、網(wǎng)站建設(shè)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)