前言
最近在寫一個自定義播放器, 寫之前我們肯定要把播放器的屬性和方法全部過一遍,知彼知己,方能百戰(zhàn)不殆嘛...后面會把自己寫的播放器和踩過的一些坑也上傳上來
video標簽行內(nèi)屬性
src：視頻的URL
poster：視頻封面，沒有播放時顯示的圖片
preload：預加載
autoplay：自動播放
loop：循環(huán)播放
controls：瀏覽器自帶的控制條
width：視頻寬度
height：視頻高度
webkit-playsinline="true" IOS下防止全屏播放
playsinline="true" 同上
x-webkit-airplay="true" 支持ios的AirPlay功能
x5-video-player-type="h5" 啟用同層H5播放器
x5-video-player-fullscreen="true" 全屏設(shè)置
x5-video-orientation="portraint" 豎屏
style="object-fit:fill" 封面鋪滿
muted="true" 靜音播放
應(yīng)該還有一些...不過暫時沒用到, 可以去查MDN文檔
video對象的屬性和方法
1.錯誤狀態(tài)
$video.error; //null:正常?
? $video.error.code; //1.用戶終止 2.網(wǎng)絡(luò)錯誤 3.解碼錯誤 4.URL無效
2.網(wǎng)絡(luò)狀態(tài)屬性(有些比較常用)
$video.currentSrc; //返回當前資源的URL?
? $video.src = value; //返回或設(shè)置當前資源的URL?
? $video.canPlayType(type); //是否能播放某種格式的資源?
? $video.networkState; //0.此元素未初始化? 1.正常但沒有使用網(wǎng)絡(luò)? 2.正在下載數(shù)據(jù)? 3.沒有找到資源?
? $video.load(); //重新加載src指定的資源?
? $video.buffered; //返回已緩沖區(qū)域，$video.buffered.end(0)拿到最后一刻的數(shù)據(jù)
? $video.preload; //none:不預載 metadata:預載資源信息 auto:
3.準備狀態(tài)
$video.readyState;? ? //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA?
? $video.seeking; //是否正在seeking
4.播放狀態(tài)( 常用 )
$video.currentTime = value; //當前播放的位置，賦值可改變位置?
? $video.duration; //當前資源長度 流返回無限?
? $video.paused; //是否暫停?
? $video.defaultPlaybackRate = value;//默認的回放速度，可以設(shè)置?
? $video.playbackRate = value;//當前播放速度，設(shè)置后馬上改變?
? $video.seekable; //返回可以seek的區(qū)域
? $video.ended; //是否結(jié)束?
? $video.autoPlay;? //是否自動播放?
? $video.loop;? //是否循環(huán)播放?
? $video.play();? ? //播放?
? $video.pause();? //暫停
5.控制
$video.controls;//是否有默認控制條?
? $video.volume = value; //音量?
? $video.muted = value; //靜音
video事件方法(常用的加*了)
loadstart? //客戶端開始請求數(shù)據(jù)?
*progress? ? //客戶端正在請求數(shù)據(jù)?
suspend? ? //延遲下載?
abort? ? ? //客戶端主動終止下載（不是因為錯誤引起），?
*error? ? ? //請求數(shù)據(jù)時遇到錯誤?
stalled? ? //網(wǎng)速失速?
*play? ? ? ? //play()和autoplay開始播放時觸發(fā)?
*pause? ? ? //pause()觸發(fā)?
loadedmetadata? //成功獲取資源長度?
*waiting? ? //等待數(shù)據(jù)，并非錯誤?
*playing? ? //開始回放?
canplay? ? //可以播放，但中途可能因為加載而暫停?
*canplaythrough //可以播放?
seeking? ? //資源尋找中?
seeked? ? ? //資源尋找完畢?
*timeupdate? //播放時間改變?
*ended? ? ? //播放結(jié)束?
ratechange? //播放速率改變?
durationchange? //資源長度改變?
*volumechange? ? //音量改變
基本上自定義播放器代碼都是基于這個api和屬性來寫的, 以后方便自己查閱....
