[TOC] ## image元素 ### alt屬性，src屬性 alt屬性返回image元素的HTML標簽的alt屬性值，src屬性返回image元素的HTML標簽的src屬性值。 ~~~ // 方法一：HTML5構造函數Image var img1 = new Image(); img1.src = 'image1.png'; img1.alt = 'alt'; document.body.appendChild(img1); // 方法二：DOM HTMLImageElement var img2 = document.createElement('img'); img2.src = 'image2.jpg'; img2.alt = 'alt text'; document.body.appendChild(img2); document.images[0].src // image1.png ~~~ ### complete屬性 complete屬性返回一個布爾值，true表示當前圖像屬于瀏覽器支持的圖形類型，并且加載完成，解碼過程沒有出錯，否則就返回false。 ### height屬性，width屬性 這兩個屬性返回image元素被瀏覽器渲染后的高度和寬度。 ### naturalWidth屬性，naturalHeight屬性 這兩個屬性只讀，表示image對象真實的寬度和高度。 ~~~ myImage.addEventListener('onload', function() { console.log('My width is: ', this.naturalWidth); console.log('My height is: ', this.naturalHeight); }); ~~~ ## audio元素，video元素 audio元素和video元素加載音頻和視頻時，以下事件按次序發生。 * loadstart：開始加載音頻和視頻。 * durationchange：音頻和視頻的duration屬性（時長）發生變化時觸發，即已經知道媒體文件的長度。如果沒有指定音頻和視頻文件，duration屬性等于NaN。如果播放流媒體文件，沒有明確的結束時間，duration屬性等于Inf（Infinity）。 * loadedmetadata：媒體文件的元數據加載完畢時觸發，元數據包括duration（時長）、dimensions（大小，視頻獨有）和文字軌。 * loadeddata：媒體文件的第一幀加載完畢時觸發，此時整個文件還沒有加載完。 * progress：瀏覽器正在下載媒體文件，周期性觸發。下載信息保存在元素的buffered屬性中。 * canplay：瀏覽器準備好播放，即使只有幾幀，readyState屬性變為CAN_PLAY。 * canplaythrough：瀏覽器認為可以不緩沖（buffering）播放時觸發，即當前下載速度保持不低于播放速度，readyState屬性變為CAN_PLAY_THROUGH。 除了上面這些事件，audio元素和video元素還支持以下事件。 | 事件 | 觸發條件 | | --- | --- | | abort | 播放中斷 | | emptied | 媒體文件加載后又被清空，比如加載后又調用load方法重新加載。 | | ended | 播放結束 | | error | 發生錯誤。該元素的error屬性包含更多信息。 | | pause | 播放暫停 | | play | 暫停后重新開始播放 | | playing | 開始播放，包括第一次播放、暫停后播放、結束后重新播放。 | | ratechange | 播放速率改變 | | seeked | 搜索操作結束 | | seeking | 搜索操作開始 | | stalled | 瀏覽器開始嘗試讀取媒體文件，但是沒有如預期那樣獲取數據 | | suspend | 加載文件停止，有可能是播放結束，也有可能是其他原因的暫停 | | timeupdate | 網頁元素的currentTime屬性改變時觸發。 | | volumechange | 音量改變時觸發（包括靜音）。 | | waiting | 由于另一個操作（比如搜索）還沒有結束，導致當前操作（比如播放）不得不等待。 |