今天小編給大家分享的是在html頁面中插入視頻的方法介紹,很多人都不太了解,今天小編為了讓大家更加了解html頁面,所以給大家總結(jié)了以下內(nèi)容,一起往下看吧。一定會有所收獲的哦。
創(chuàng)新互聯(lián)建站成立與2013年,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元崗巴做網(wǎng)站,已為上家服務(wù),為崗巴各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108
Video標簽的使用
Video標簽含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性, 以及一個內(nèi)部使用的標簽
(1) src屬性和poster屬性
你能想象src屬性是用來干啥的。跟標簽的一樣,這個屬性用于指定視頻的地址。而poster屬性用于指定一張圖片,在當前視頻數(shù)據(jù)無效時顯示(預(yù)覽圖)。視頻數(shù)據(jù)無效可能是視頻正在加載,可能是視頻地址錯誤等等。
(2) preload屬性
這個屬性也能通過名字了解用處,此屬性用于定義視頻是否預(yù)加載。屬性有三個可選擇的值:none、metadata、auto。如果不使用此屬性,默認為auto。
None:不進行預(yù)加載。使用此屬性值,可能是頁面制作者認為用戶不期望此視頻,或者減少HTTP請求。
Metadata:部分預(yù)加載。使用此屬性值,代表頁面制作者認為用戶不期望此視頻,但為用戶提供一些元數(shù)據(jù)(包括尺寸,第一幀,曲目列表,持續(xù)時間等等)。
Auto:全部預(yù)加載。
(3) autoplay屬性
又是一個看名字知道用處的屬性。Autoplay屬性用于設(shè)置視頻是否自動播放,是一個布爾屬性。當出現(xiàn)時,表示自動播放,去掉是表示不自動播放。
注意,HTML中布爾屬性的值不是true和false。正確的用法是,在標簽中使用此屬性表示true,此時屬性要么沒有值,要么其值恒等于他的名字 (此處,自動播放為或者);而在標簽中不使用此屬性表示false(此處不進行自動播放為)。
(4) loop屬性
一目了然,loop屬性用于指定視頻是否循環(huán)播放,同樣是一個布爾屬性。
(5) controls屬性
Controls屬性用于向瀏覽器指明頁面制作者沒有使用腳本生成播放控制器,需要瀏覽器啟用本身的播放控制欄。
控制欄須包括播放暫??刂疲シ胚M度控制,音量控制等等。
每個瀏覽器默認的播放控制欄在界面上不一樣。由于我瀏覽器的詭異問題,F(xiàn)irefox和Safari的Video標簽不正常,所以這兩個只能在網(wǎng)上找截圖了。
(6) width屬性和height屬性
屬于標簽的通用屬性了,這個不用多說。
(7) source標簽
Source標簽用于給媒體(因為audio標簽同樣可以包含此標簽,所以這兒用媒體,而不是視頻)指定多個可選擇的(瀏覽器最終只能選一個)文件地址,且只能在媒體標簽沒有使用src屬性時使用。
瀏覽器按source標簽的順序檢測標簽指定的視頻是否能夠播放(可能是視頻格式不支持,視頻不存在等等),如果不能播放,換下一個。此方法多用于兼容不同的瀏覽器。Source標簽本身不代表任何含義,不能單獨出現(xiàn)。
此標簽包含src、type、media三個屬性。
src屬性:用于指定媒體的地址,和video標簽的一樣。
Type屬性:用于說明src屬性指定媒體的類型,幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。
Media屬性:用于說明媒體在何種媒介中使用,不設(shè)置時默認值為all,表示支持所有媒介。你想到