文章目錄
- HTML 音頻/視頻 方法
- HTML 音頻/視頻屬性
- HTML 音頻/視頻事件
- 代碼展示如下
- 事件代碼：
HTML 音頻/視頻 方法
| 方法 | 描述 |
|---|---|
| addTextTrack() | 向音頻/視頻添加新的文本軌道。 |
| canPlayType() | 檢測瀏覽器是否能播放指定的音頻/視頻類型。 |
| load() | 重新加載音頻/視頻元素。 |
| play() | 開始播放音頻/視頻。 |
| pause() | 暫停當前播放的音頻/視頻。 |
HTML 音頻/視頻屬性
| 屬性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音頻軌道的 AudioTrackList 對象。 |
| autoplay | 設置或返回是否在加載完成后隨即播放音頻/視頻。 |
| buffered | 返回表示音頻/視頻已緩沖部分的 TimeRanges 對象。 |
| controller | 返回表示音頻/視頻當前媒體控制器的 MediaController 對象。 |
| controls | 設置或返回音頻/視頻是否顯示控件（比如播放/暫停等）。 |
| crossOrigin | 設置或返回音頻/視頻的 CORS 設置。 |
| currentSrc | 返回當前音頻/視頻的 URL。 |
| currentTime | 設置或返回音頻/視頻中的當前播放位置（以秒計）。 |
| defaultMuted | 設置或返回音頻/視頻默認是否靜音。 |
| defaultPlaybackRate | 設置或返回音頻/視頻的默認播放速度。 |
| duration | 返回當前音頻/視頻的長度（以秒計）。 |
| ended | 返回音頻/視頻的播放是否已結束。 |
| error | 返回表示音頻/視頻錯誤狀態的 MediaError 對象。 |
| loop | 設置或返回音頻/視頻是否應在結束時重新播放。 |
| mediaGroup | 設置或返回音頻/視頻所屬的組合（用于連接多個音頻/視頻元素）。 |
| muted | 設置或返回音頻/視頻是否靜音。 |
| networkState | 返回音頻/視頻的當前網絡狀態。 |
| paused | 設置或返回音頻/視頻是否暫停。 |
| playbackRate | 設置或返回音頻/視頻播放的速度。 |
| played | 返回表示音頻/視頻已播放部分的 TimeRanges 對象。 |
| preload | 設置或返回音頻/視頻是否應該在頁面加載后進行加載。 |
| readyState | 返回音頻/視頻當前的就緒狀態。 |
| seekable | 返回表示音頻/視頻可尋址部分的 TimeRanges 對象。 |
| seeking | 返回用戶是否正在音頻/視頻中進行查找。 |
| src | 設置或返回音頻/視頻元素的當前來源。 |
| startDate | 返回表示當前時間偏移的 Date 對象。 |
| textTracks | 返回表示可用文本軌道的 TextTrackList 對象。 |
| videoTracks | 返回表示可用視頻軌道的 VideoTrackList 對象。 |
| volume | 設置或返回音頻/視頻的音量。 |
HTML 音頻/視頻事件
| 事件 | 描述 |
|---|---|
| abort | 當音頻/視頻的加載已放棄時觸發。 |
| canplay | 當瀏覽器可以開始播放音頻/視頻時觸發。 |
| canplaythrough | 當瀏覽器可在不因緩沖而停頓的情況下進行播放時觸發。 |
| durationchange | 當音頻/視頻的時長已更改時觸發。 |
| emptied | 當目前的播放列表為空時觸發。 |
| ended | 當目前的播放列表已結束時觸發。 |
| error | 當在音頻/視頻加載期間發生錯誤時觸發。 |
| loadeddata | 當瀏覽器已加載音頻/視頻的當前幀時觸發。 |
| loadedmetadata | 當瀏覽器已加載音頻/視頻的元數據時觸發。 |
| loadstart | 當瀏覽器開始查找音頻/視頻時觸發。 |
| pause | 當音頻/視頻已暫停時觸發。 |
| play | 當音頻/視頻已開始或不再暫停時觸發。 |
| playing | 當音頻/視頻在因緩沖而暫停或停止后已就緒時觸發。 |
| progress | 當瀏覽器正在下載音頻/視頻時觸發。 |
| ratechange | 當音頻/視頻的播放速度已更改時觸發。 |
| seeked | 當用戶已移動/跳躍到音頻/視頻中的新位置時觸發。 |
| seeking | 當用戶開始移動/跳躍到音頻/視頻中的新位置時觸發。 |
| stalled | 當瀏覽器嘗試獲取媒體數據，但數據不可用時觸發。 |
| suspend | 當瀏覽器刻意不獲取媒體數據時觸發。 |
| timeupdate | 當目前的播放位置已更改時觸發。 |
| volumechange | 當音量已更改時觸發。 |
| waiting | 當視頻由于需要緩沖下一幀而停止時觸發。 |
代碼展示如下
添加音頻
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><audio controls autoplay loop muted><source src="./media/music.mp3"><source src="./media/music.ogg"></audio>
</body>
</html>
添加視頻
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- controls:控制播放暫停的按鈕 autoplay:自動播放loop:無限循環muted:靜音poster:視頻封面--><video width="500" height="300" controls loop autoplay muted poster="./media/rt.jpg"><source src="./media/explore_promo.mp4"><source src="./media/video.mp4"></video>
</body>
</html>
Js代碼
//錯誤狀態 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段區域的結束位置
事件代碼：
eventTester = function(e){ Media.addEventListener(e,function(){ console.log((new Date()).getTime(),e); });
} 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”); //音量改變
各瀏覽器目前對html5視頻格式的支持：
瀏覽器 影音格式 🌈🌈 🌈🌈 Ogg Theora 🌈🌈 MP4(H.264) 🌈🌈 WebM
Microsoft Internet Explorer9 🌈 ×🌈🌈🌈🌈 🌈🌈 √🌈🌈 🌈🌈🌈 ×
Mozilla Firefox5+ 🌈🌈 🌈🌈 √ 🌈🌈 🌈🌈 🌈🌈 × 🌈🌈 🌈🌈 🌈√
Google Chrome13+ 🌈🌈 🌈√🌈🌈 🌈🌈 🌈🌈 √🌈🌈 🌈🌈 🌈🌈 √
Apple Safari5+ 🌈🌈 🌈🌈 × 🌈🌈 🌈🌈 🌈🌈 √ 🌈🌈 🌈🌈 🌈🌈 ×
Opera11+ 🌈🌈 🌈🌈 🌈 √ 🌈🌈 🌈🌈 🌈🌈 ×🌈🌈 🌈🌈 🌈🌈 √
)
安裝及使用教程)
2)
題】)
