這篇文章主要介紹了HTML5中Video屬性及自定義播放器的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站制作、成都網(wǎng)站制作與策劃設(shè)計,瑞金網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:瑞金等地區(qū)。瑞金做網(wǎng)站價格咨詢:18982081108

使用方法：

Your browser does not support the video tag.

video>

各瀏覽器目前對html5視頻格式的支持：

瀏覽器 | 影音格式 Ogg Theora MP4(H.264) WebM

Microsoft Internet Explorer9 × √ ×

Mozilla Firefox5+ √ × √

Google Chrome13+ √ √ √

Apple Safari5+ × √ ×

Opera11+ √ × √

屬性列表：

autoplay autoplay 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。默認(rèn)為false

controls controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。這些控件是由瀏覽器來提供的，樣式也可能因為不同瀏覽器而不一樣

height pixels 設(shè)置視頻播放器的高度。

loop loop 如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。

preload none、metadata、auto

如果出現(xiàn)該屬性，則視頻在頁面加載時進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。

auto - 當(dāng)頁面加載后載入整個視頻

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

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

src url 要播放的視頻的URL。

 poster  url  預(yù)覽圖  媒介屬性  一般用于js操作

屬性 可讀狀態(tài) 描述

error 只讀

使用media.error返回一個MediaError對象表明當(dāng)前的錯誤狀態(tài)，如果沒有出錯，返回null，共有4個可能值。

MEDIA_ERR_ABORTED（數(shù)字值為1）：媒體資源獲取異常；

MEDIA_ERR_NETWORK（數(shù)字值為2）：網(wǎng)絡(luò)錯誤；

MEDIA_ERR_DECODE（數(shù)字值為3）：媒體解碼錯誤；

MEDIA_ERR_SRC_NOT_SUPPORTED（數(shù)字值為4）：視頻格式被不支持。

currentSrc 只讀 返回該媒介標(biāo)簽的src屬性值

networkState  只讀 返回媒介的網(wǎng)絡(luò)狀態(tài)，共有4個可能值。

NETWORK_EMPTY（數(shù)字值為0）：尚未初始化；

NETWORK_IDLE（數(shù)字值為1）：加載完成，網(wǎng)絡(luò)空閑；

NETWORK_LOADING（數(shù)字值為2）：視頻加載中；

NETWORK_NO_SOURCE（數(shù)字值為3）：加載失敗。

 preload  可讀寫  可獲取或改變媒介標(biāo)簽的preload屬性值

 buffered  只讀  返回一個TimeRanges對象，確認(rèn)瀏覽器已緩存媒介文件

 readyState  只讀

返回媒介當(dāng)前播放位置的就緒狀態(tài)，共有5個可能值。

HAVE_NOTHING（數(shù)字值為0）：當(dāng)前播放位置無有效媒介資源；

HAVE_METADATA（數(shù)字值為1）：加載中，媒介資源確認(rèn)存在，但當(dāng)前位置沒有能夠加載到有效媒介數(shù)據(jù)進(jìn)行播放；

HAVE_CURRENT_DATA（數(shù)字值為2）：已獲取到當(dāng)前播放數(shù)據(jù)，但沒有足夠的數(shù)據(jù)進(jìn)行播放；

HAVE_FUTURE_DATA（數(shù)字值為3）：已獲取到后續(xù)播放數(shù)據(jù)，可以進(jìn)行播放；

HAVE_ENOUGH_DATA（數(shù)字值為4）：可以進(jìn)行播放，且瀏覽器確認(rèn)媒體數(shù)據(jù)以某一種速度進(jìn)行加載，可以保證有足夠的后續(xù)數(shù)據(jù)進(jìn)行播放，而不會使瀏覽器的播放進(jìn)度趕上加載數(shù)據(jù)的末端。

 seeking  只讀  返回一個布爾值，表明瀏覽器是否正在請求數(shù)據(jù)，ture表示瀏覽器正在請求數(shù)據(jù)，false表示瀏覽器已停止請求。

 seekable  只讀 發(fā)揮一個TimeRanges對象，表明可以對當(dāng)前媒介資源進(jìn)行請求。

 currentTime  可讀寫  獲取或改變視頻的播放位置。單位為秒

 startTime  只讀  返回媒介文件播放的開始時間，通常為0

 duration  只讀  返回媒介文件總的播放時長

 played  只讀  返回一個TimeRanges對象，標(biāo)明瀏覽器已播放的媒介資源范圍

paused 只讀 返回一個布爾值，表明媒介是否暫停播放，ture表示媒介暫停播放，false表示媒介正在播放。

ended 只讀 返回一個布爾值，表明媒介是否已結(jié)束，ture表示媒介已經(jīng)播放完畢，false表示還未播放完畢。

defaultPlaybackRate 可讀寫 返回媒介默認(rèn)的播放速率，或?qū)ζ滟x值，改變媒介的默認(rèn)播放速率。

playbackRate 可讀寫 返回當(dāng)前的媒介播放速率，或?qū)ζ滟x值，改變當(dāng)前的媒介播放速率

autoplay 可讀寫 返回一個布爾值，表明當(dāng)前媒介是否設(shè)置了自動播放，ture表示當(dāng)前媒介為自動播放，false表示非自動播放，或?qū)ζ滟x值，設(shè)置是否自動播放。

loop 可讀寫 返回一個布爾值，表明當(dāng)前媒介是否設(shè)置了循環(huán)播放，ture表示當(dāng)前媒介設(shè)置了循環(huán)播放，false表示沒有設(shè)置循環(huán)播放，或?qū)ζ滟x值，設(shè)置是否循環(huán)播放。

controls 可讀寫 返回一個布爾值，表明當(dāng)前媒介是否使用了瀏覽器默認(rèn)的播放控制欄，ture表示加載了，false表示沒有加載，或?qū)ζ滟x值，設(shè)置是否使用瀏覽器默認(rèn)的播放控制欄

 volume 可讀寫 返回當(dāng)前媒介的音量值，或?qū)ζ滟x值，改變媒介的播放音量，范圍為0到1，0相當(dāng)于靜音，1為最大音量。

 muted 可讀寫 返回一個布爾值，表明當(dāng)前媒介播放是否開啟靜音，ture表示沒有開啟靜音，false表示靜音，或?qū)ζ滟x值，設(shè)置播放是否靜音。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5中Video屬性及自定義播放器的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!