HTML5中Video屬性及自定義播放器的示例分析

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

使用方法：

 <video width="320" height="240" controls="controls">

　　<source src="movie.ogg" type="video/ogg">

　　<source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

video>

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

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

Microsoft Internet Explorer9 &times; &radic; &times;

Mozilla Firefox5+ &radic; &times; &radic;

Google Chrome13+ &radic; &radic; &radic;

Apple Safari5+ &times; &radic; &times;

Opera11+ &radic; &times; &radic;

屬性列表：

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

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

height pixels 設置視頻播放器的高度。

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

preload none、metadata、auto

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

auto - 當頁面加載后載入整個視頻

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

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

src url 要播放的視頻的URL。

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

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

error 只讀

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

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

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

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

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

currentSrc 只讀 返回該媒介標簽的src屬性值

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

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

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

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

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

 preload  可讀寫  可獲取或改變媒介標簽的preload屬性值

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

 readyState  只讀

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML5中Video屬性及自定義播放器的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!