今天小編給大家分享的是在html頁面中插入視頻的方法介紹，很多人都不太了解，今天小編為了讓大家更加了解html頁面，所以給大家總結了以下內容，一起往下看吧。一定會有所收獲的哦。

成都創(chuàng)新互聯(lián)公司不只是一家網(wǎng)站建設的網(wǎng)絡公司；我們對營銷、技術、服務都有自己獨特見解，公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關注我們的網(wǎng)站制作、成都網(wǎng)站設計質量和服務品質，在得到用戶滿意的同時，也能得到同行業(yè)的專業(yè)認可，能夠為行業(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術創(chuàng)新，服務升級，滿足企業(yè)一站式成都全網(wǎng)營銷推廣需求，讓再小的高端網(wǎng)站設計也能產生價值！

Video標簽的使用

Video標簽含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性， 以及一個內部使用的標簽<source>。Video標簽內除了可以包含<source>標簽外，還可以包含當指定的視頻都不能播放時，返回的內容。

(1) src屬性和poster屬性

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

<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屬性

這個屬性也能通過名字了解用處，此屬性用于定義視頻是否預加載。屬性有三個可選擇的值：none、metadata、auto。如果不使用此屬性，默認為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：不進行預加載。使用此屬性值，可能是頁面制作者認為用戶不期望此視頻，或者減少HTTP請求。

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

Auto：全部預加載。

(3) autoplay屬性

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

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

注意，HTML中布爾屬性的值不是true和false。正確的用法是，在標簽中使用此屬性表示true，此時屬性要么沒有值，要么其值恒等于他的名字 （此處，自動播放為<video autoplay />或者<video autoplay=”autoplay” />）；而在標簽中不使用此屬性表示false（此處不進行自動播放為<video />）。

(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)播放，同樣是一個布爾屬性。

(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屬性用于向瀏覽器指明頁面制作者沒有使用腳本生成播放控制器，需要瀏覽器啟用本身的播放控制欄。

控制欄須包括播放暫停控制，播放進度控制，音量控制等等。

每個瀏覽器默認的播放控制欄在界面上不一樣。由于我瀏覽器的詭異問題，F(xiàn)irefox和Safari的Video標簽不正常，所以這兩個只能在網(wǎng)上找截圖了。

(6) width屬性和height屬性

屬于標簽的通用屬性了，這個不用多說。

(7) source標簽

<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標簽用于給媒體（因為audio標簽同樣可以包含此標簽，所以這兒用媒體，而不是視頻）指定多個可選擇的（瀏覽器最終只能選一個）文件地址，且只能在媒體標簽沒有使用src屬性時使用。

瀏覽器按source標簽的順序檢測標簽指定的視頻是否能夠播放（可能是視頻格式不支持，視頻不存在等等），如果不能播放，換下一個。此方法多用于兼容不同的瀏覽器。Source標簽本身不代表任何含義，不能單獨出現(xiàn)。

此標簽包含src、type、media三個屬性。

src屬性：用于指定媒體的地址，和video標簽的一樣。

Type屬性：用于說明src屬性指定媒體的類型，幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。

Media屬性：用于說明媒體在何種媒介中使用，不設置時默認值為all，表示支持所有媒介。你想到<style>標簽的media屬性了么？一樣一樣一樣的。

(8) 一個完整的例子

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

這段代碼在頁面中定義了一個視頻，此視頻的預覽圖為poster的屬性值，顯示瀏覽器的默認媒體控制欄，預加載視頻的元數(shù)據(jù)，循環(huán)播放，寬度為900像素，高度為240像素。

第一選擇視頻地址為第一個source標簽的src屬性值，視頻類別為Ogg視頻，視頻編碼譯碼器為Theora，音頻編碼譯碼器為Vorbis，播放媒 介為顯示器；第二選擇視頻地址不再累述。如果你還要兼容IE的話，可以在最后一個source標簽后再加上Flash播放器的標簽集，或者使用一點 JavaScript代碼。

以上就是在html頁面中插入視頻方法的簡略介紹，當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道哦！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享題目：在html頁面中插入視頻的方法介紹-創(chuàng)新互聯(lián)
URL鏈接：http://www.chinadenli.net/article0/djhdoo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設、外貿網(wǎng)站建設、ChatGPT、建站公司、品牌網(wǎng)站制作、用戶體驗

廣告

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