詳解Html5中video標籤那些屬性和方法

最近在寫一個自訂播放器, 寫之前我們肯定要把播放器的屬性和方法全部過一遍,知彼知己,方能百戰不殆嘛...後面會把自己寫的播放器和踩過的一些坑也上傳上來

• src：影片的URL
• poster：影片封面，沒有播放時顯示的圖片
• preload：預先載入
• autoplay：自動播放
• loop：循環播放
• 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 全螢幕設置
• x5-video-orientation=portraint 垂直屏
• style=object-fit:fill 封面鋪滿
• muted=true 靜音播放

應該還有一些...不過暫時沒用到, 可以去查MDN文檔

1.錯誤狀態

 $video.error; //null:正常$video.error.code; //1.使用者終止2.網路錯誤3.解碼錯誤4.URL無效

2.網路狀態屬性(有些比較常用)

 $video.currentSrc; //傳回目前資源的URL $video.src = value; //傳回或設定目前資源的URL $video.canPlayType(type); //是否能播放某種格式的資源$video.networkState ; //0.此元素未初始化1.正常但沒有使用網路2.正在下載資料3.沒有找到資源$video.load(); //重新載入src指定的資源$video.buffered; //返回已緩衝區域，$video.buffered.end(0)拿到最後一刻的資料$video.preload; //none:不預載metadata:預載資源資訊auto:

3.準備狀態

 $video.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA $video.seeking; //是否正在seeking

4.播放狀態(常用)

 $video.currentTime = value; //目前播放的位置，賦值可改變位置$video.duration; //當前資源長度流返回無限$video.paused; //是否暫停$video.defaultPlaybackRate = value;//默認的重播速度，可以設定$video.playbackRate = value;//目前播放速度，設定後馬上改變$video.seekable; //返回可以seek的區域$video.ended; //是否結束$video.autoPlay; //是否自動播放$video.loop; //是否循環播放$video.play(); //播放$video.pause (); //暫停

5.控制

 $video.controls;//是否有預設控制條$video.volume = value; //音量$video.muted = value; //靜音video事件方法(常用的加*了)loadstart //客戶端開始請求數據*progress //客戶端正在請求資料suspend //延遲下載abort //客戶端主動終止下載（不是因為錯誤引起）， *error //請求資料時遇到錯誤stalled //網速失速*play //play()和autoplay開始播放時觸發*pause //pause()觸發loadedmetadata //成功取得資源長度*waiting //等待數據，並非錯誤*playing //開始回放canplay //可以播放，但中途可能因為載入而暫停*canplaythrough //可以播放seeking //資源尋找中seeked //資源尋找完畢*timeupdate //播放時間改變*ended //播放結束ratechange //播放速率改變durationchange //資源長度改變*volumechange //音量改變

基本上自訂播放器程式碼都是基於這個api和屬性來寫的, 以後方便自己查閱....

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。