Introduction récapitulative aux attributs, méthodes et événements des compétences du didacticiel HTML5 Video tag_html5

J'ai écrit un lecteur vidéo basé sur la vidéo html5 il y a quelque temps. Je ne l'ai pas compris au début, puis j'ai pu écrire un lecteur personnalisé fondamentalement complet. Au cours de ce processus, j'ai acquis une compréhension globale des attributs, des méthodes et des événements de la balise vidéo. Les catégories sont répertoriées ci-dessous.

Copier le code

Le code est le suivant :

src : attributs de la vidéo
poster : couverture vidéo, aucune image affichée lors de la lecture
preload : préchargement
autoplay : lecture automatique
boucle : lecture en boucle
contrôles : la barre de contrôle fournie avec le navigateur
largeur : largeur de la vidéo
hauteur : hauteur de la vidéo

Code HTML

Copier le code

Le code est le suivant :

> // L'audio et la vidéo peuvent obtenir des objets via JS, et JS obtient des objets vidéo et audio via id

Récupérer l'objet vidéo

Copiez le codeLe code est le suivant :

Media = document.getElementById("media");

Méthodes et propriétés des médias : HTMLVideoElement et HTMLAudioElement héritent tous deux de HTMLMediaElement

Copier le codeLe code est le suivant :

Media.error; //null:正常
Media.error.code; //1.使用者終止2.網路錯誤3.解碼錯誤4.URL無效
//網路狀態
- Media.currentSrc; //傳回目前資源的URL
- Media.src = value; //傳回或設定目前資源的URL
- Media.canPlayType(type) ; //是否能播放某種格式的資源
- Media.networkState; //0.此元素未初始化1.正常但沒有使用網路2.正在下載資料3.沒有找到資源
- Media. load(); //重新載入src指定的資源
- Media.buffered; //返回已緩衝區域，TimeRanges
- Media.preload; //none:不預載metadata:預載資源資訊auto :

//準備狀態
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking;正在seeking

//回放狀態

Media.currentTime = value; //目前播放的位置，賦值可改變位置
Media.startTime; //一般為0，如果為串流媒體或不從0開始的資源，則不為0
Media.duration; //目前資源長度流回傳無限
Media.paused; //是否暫停
Media.defaultPlaybackRate = value;//預設的回放速度，可以設定
Media.playbackRate = value;//目前播放速度，設定後馬上改變
Media.played; //傳回已播放的區域，TimeRanges，關於此物件請參閱下文
Media.seekable; //傳回可以seek的區域TimeRanges
Media.ended; //是否結束
Media.autoPlay; //是否自動播放
Media.loop; //是否循環播放
Media.play(); //播放
Media .pause(); //暫停
//視訊控制

Media.controls;//是否有預設控制條
Media.volume = value; //音量
Media.muted = value; //靜音
TimeRanges(區域)物件
TimeRanges .length; //區域段數
TimeRanges.start(index) //第index段區域的開始位置
TimeRanges.end(index) //第index段區域的結束位置
/ /相關事件

var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
},false );
}
eventTester("loadstart"); //客戶端開始請求資料
eventTester("progress"); //客戶端正在請求資料
eventTester("suspend"); //延遲下載
eventTester("abort"); //客戶端主動終止下載（不是因為錯誤引起）
eventTester("loadstart"); //客戶端開始請求資料
eventTester(" progress"); //客戶端正在請求資料
eventTester("suspend"); //延遲下載
eventTester("abort"); //客戶端主動終止下載（不是因為錯誤引起），
eventTester("error"); //請求資料時遇到錯誤
eventTester("stalled"); //網速失速
eventTester("play"); //play()和autoplay開始播放時觸發
eventTester("pause"); //pause()觸發
eventTester("loadedmetadata"); //成功取得資源長度
eventTester("loadeddata"); //
eventTester("waiting"); //等待數據，並非錯誤
eventTester("playing"); //開始回放
eventTester("canplay"); //可以播放，但中途可能因為載入而暫停
eventTester("canplaythrough"); //可以播放，歌曲全部載入完畢
eventTester("seeking"); //尋找中
eventTester("seeked"); //找完畢
eventTester("timeupdate"); //播放時間改變
eventTester("ended"); //播放結束
eventTester("ratechange"); //播放速率改變
eventTester("durationchange") ; //資源長度改變
eventTester("volumechange"); //音量改變