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

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

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

使用方法：

 

Your browser does not support the video tag.

video>

各瀏覽器目前對(duì)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)該屬性，則向用戶(hù)顯示控件，比如播放按鈕。這些控件是由瀏覽器來(lái)提供的，樣式也可能因?yàn)椴煌瑸g覽器而不一樣

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

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

preload none、metadata、auto

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

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

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

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

src url 要播放的視頻的URL。

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

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

error 只讀

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

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

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

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

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

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

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

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

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

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

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

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

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

 readyState  只讀

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

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

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

HAVE_CURRENT_DATA（數(shù)字值為2）：已獲取到當(dāng)前播放數(shù)據(jù)，但沒(méi)有足夠的數(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)行播放，而不會(huì)使瀏覽器的播放進(jìn)度趕上加載數(shù)據(jù)的末端。

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

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

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

 startTime  只讀  返回媒介文件播放的開(kāi)始時(shí)間，通常為0

 duration  只讀  返回媒介文件總的播放時(shí)長(zhǎng)

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

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

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

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

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

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

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

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

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

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

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

分享標(biāo)題：HTML5中Video屬性及自定義播放器的示例分析
轉(zhuǎn)載來(lái)源：http://m.jiaotiyi.com/article/gcdeig.html