小編給大家分享一下HTML5中audio與video標(biāo)簽怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
站在用戶的角度思考問題，與客戶深入溝通，找到長春網(wǎng)站設(shè)計(jì)與長春網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋長春地區(qū)。
最近做的微信分享頁面中有大量的語音播放和視頻展示，相關(guān)的好多方法屬性以前都沒接觸過，現(xiàn)在記錄下來！
1. 首先，了解關(guān)于兩個標(biāo)簽的基本信息：
兩個標(biāo)簽的基本屬性：
| 屬性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音軌的 AudioTrackList 對象 |
| autoplay | 設(shè)置或返回是否在加載完成后隨即播放音頻/視頻 |
| buffered | 返回表示音頻/視頻已緩沖部分的 TimeRanges 對象 |
| controller | 返回表示音頻/視頻當(dāng)前媒體控制器的 MediaController 對象 |
| controls | 設(shè)置或返回音頻/視頻是否顯示控件（比如播放/暫停等） |
| crossOrigin | 設(shè)置或返回音頻/視頻的 CORS 設(shè)置 |
| currentSrc | 返回當(dāng)前音頻/視頻的 URL |
| currentTime | 設(shè)置或返回音頻/視頻中的當(dāng)前播放位置（以秒計(jì)） |
| defaultMuted | 設(shè)置或返回音頻/視頻默認(rèn)是否靜音 |
| defaultPlaybackRate | 設(shè)置或返回音頻/視頻的默認(rèn)播放速度 |
| duration | 返回當(dāng)前音頻/視頻的長度（以秒計(jì)） |
| ended | 返回音頻/視頻的播放是否已結(jié)束 |
| error | 返回表示音頻/視頻錯誤狀態(tài)的 MediaError 對象 |
| loop | 設(shè)置或返回音頻/視頻是否應(yīng)在結(jié)束時重新播放 |
| mediaGroup | 設(shè)置或返回音頻/視頻所屬的組合（用于連接多個音頻/視頻元素） |
| muted | 設(shè)置或返回音頻/視頻是否靜音 |
| networkState | 返回音頻/視頻的當(dāng)前網(wǎng)絡(luò)狀態(tài) |
| paused | 設(shè)置或返回音頻/視頻是否暫停 |
| playbackRate | 設(shè)置或返回音頻/視頻播放的速度 |
| played | 返回表示音頻/視頻已播放部分的 TimeRanges 對象 |
| preload | 設(shè)置或返回音頻/視頻是否應(yīng)該在頁面加載后進(jìn)行加載 |
| readyState | 返回音頻/視頻當(dāng)前的就緒狀態(tài) |
| seekable | 返回表示音頻/視頻可尋址部分的 TimeRanges 對象 |
| seeking | 返回用戶是否正在音頻/視頻中進(jìn)行查找 |
| src | 設(shè)置或返回音頻/視頻元素的當(dāng)前來源 |
| startDate | 返回表示當(dāng)前時間偏移的 Date 對象 |
| textTracks | 返回表示可用文本軌道的 TextTrackList 對象 |
| videoTracks | 返回表示可用視頻軌道的 VideoTrackList 對象 |
| volume | 設(shè)置或返回音頻/視頻的音量 |
兩個標(biāo)簽的基本方法：
| 方法 | 描述 |
|---|---|
| addTextTrack() | 向音頻/視頻添加新的文本軌道 |
| canPlayType() | 檢測瀏覽器是否能播放指定的音頻/視頻類型 |
| load() | 重新加載音頻/視頻元素 |
| play() | 開始播放音頻/視頻 |
| pause() | 暫停當(dāng)前播放的音頻/視頻 |
兩個標(biāo)簽中的事件：
| 事件 | 描述 |
|---|---|
| abort | 當(dāng)音頻/視頻的加載已放棄時 |
| canplay | 當(dāng)瀏覽器可以播放音頻/視頻時 |
| canplaythrough | 當(dāng)瀏覽器可在不因緩沖而停頓的情況下進(jìn)行播放時 |
| durationchange | 當(dāng)音頻/視頻的時長已更改時 |
| emptied | 當(dāng)目前的播放列表為空時 |
| ended | 當(dāng)目前的播放列表已結(jié)束時 |
| error | 當(dāng)在音頻/視頻加載期間發(fā)生錯誤時 |
| loadeddata | 當(dāng)瀏覽器已加載音頻/視頻的當(dāng)前幀時 |
| loadedmetadata | 當(dāng)瀏覽器已加載音頻/視頻的元數(shù)據(jù)時 |
| loadstart | 當(dāng)瀏覽器開始查找音頻/視頻時 |
| pause | 當(dāng)音頻/視頻已暫停時 |
| play | 當(dāng)音頻/視頻已開始或不再暫停時 |
| playing | 當(dāng)音頻/視頻在已因緩沖而暫?；蛲Ｖ购笠丫途w時 |
| progress | 當(dāng)瀏覽器正在下載音頻/視頻時 |
| ratechange | 當(dāng)音頻/視頻的播放速度已更改時 |
| seeked | 當(dāng)用戶已移動/跳躍到音頻/視頻中的新位置時 |
| seeking | 當(dāng)用戶開始移動/跳躍到音頻/視頻中的新位置時 |
| stalled | 當(dāng)瀏覽器嘗試獲取媒體數(shù)據(jù)，但數(shù)據(jù)不可用時 |
| suspend | 當(dāng)瀏覽器刻意不獲取媒體數(shù)據(jù)時 |
| timeupdate | 當(dāng)目前的播放位置已更改時 |
| volumechange | 當(dāng)音量已更改時 |
| waiting | 當(dāng)視頻由于需要緩沖下一幀而停止 |
2. 在項(xiàng)目中的使用：在視頻沒有加載出來的時候需要顯示這個視頻的第一幀圖片，我這里第一幀圖片是后臺傳過來的，查了相關(guān)資料原來video標(biāo)簽有個屬性poster專門用來顯示視頻的第一幀圖片，相當(dāng)于視頻封面圖。poster 屬性用于設(shè)置或返回視頻的 poster 屬性值。這個屬性描述了在視頻加載時或在用戶點(diǎn)擊播放按鈕前顯示的圖片。如果不包含該屬性，視頻的第一幀將被用來代替顯示。
{{item.fragment_text_describe}}
![]()
在音頻播放的時候?yàn)g覽器不一定支持該種類型的音頻，所以要做一個判斷：用canPlayType() 方法檢查瀏覽器是否能播放指定的音頻/視頻類型。canPlayType() 方法可返回下列值之一：
"probably" - 瀏覽器最可能支持該音頻/視頻類型
"maybe" - 瀏覽器也許支持該音頻/視頻類型
"" - （空字符串）瀏覽器不支持該音頻/視頻類型
使用語法：
重慶分公司
重慶分公司
audio.canPlayType("mp3"))以上是“HTML5中audio與video標(biāo)簽怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
