這篇文章主要介紹了關於HTML5中audio與video標籤的使用，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
最近做的微信分享頁面中有大量的語音播放和視訊展示，相關的好多方法屬性以前都沒接觸過，現在記錄下來！
1. 首先，了解兩個標籤的基本資訊：
兩個標籤的基本屬性：
| 屬性 | 描述 |
|---|---|
| #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 物件|
| 設定或傳回音訊/視訊的音量 |
| 描述 | |
|---|---|
| 向音頻/影片新增新的文字軌道 | |
| 檢測瀏覽器是否能播放指定的音訊/視訊類型 | |
| 重新載入音訊/視訊元素 | |
| 開始播放音訊/視訊 | |
| 暫停目前播放的音訊/視訊 |
| 事件 | 描述 |
|---|---|
| #abort | 當音訊/視訊的載入已放棄時 |
| canplay | 當瀏覽器可以播放音訊/視訊時 |
| canplaythrough | 當瀏覽器可在不因緩衝而停頓的情況下進行播放時 |
| durationchange | #當音訊/視訊的長度已更改時 |
| emptied | 當目前的播放清單為空白時 |
| ended | 當目前的播放清單已結束時 |
| error | 當在音訊/視訊載入期間發生錯誤時 |
| #loadeddata | 當瀏覽器已載入音訊/視訊的當前幀時 |
| loadedmetadata | 當瀏覽器已載入音訊/視訊的元資料時 |
| loadstart | #當瀏覽器開始尋找音訊/視訊時 |
| pause | #當音訊/視訊已暫停時 |
| play | 當音訊/視訊已開始或不再暫停時 |
| #playing | 當音訊/視訊在已因緩衝而暫停或停止後已就緒時 |
| progress | #當瀏覽器正在下載音訊/視訊時 |
| 當音訊/視訊的播放速度已更改時 | |
| 當用戶已移動/跳躍到音訊/視訊中的新位置時 | |
| 當使用者開始移動/跳躍到音訊/視訊中的新位置時 | |
| 當瀏覽器嘗試獲取媒體數據，但數據不可用時 | |
| 當瀏覽器刻意不獲取媒體數據時 | |
| 當目前的播放位置已更改時 | |
| 當音量已更改時 | |
| 當影片因為需要緩衝下一幀而停止 |
以上是HTML5中audio與video標籤的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
