HTML5中audio與video標(biāo)簽的使用
發(fā)表時(shí)間：2023-09-12 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這篇文章主要介紹了關(guān)于HTML5中audio與video標(biāo)簽的使用 ，有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下最近做的微信分享頁(yè)面中有大量的語(yǔ)音播放和視頻展示，相關(guān)的好多方法屬性以前都沒(méi)接觸過(guò)，現(xiàn)在記錄下來(lái)！1. 首先，了解關(guān)于兩個(gè)標(biāo)簽的基本信息：兩個(gè)標(biāo)簽的基本屬性：屬性描述...
這篇文章主要介紹了關(guān)于HTML5中audio與video標(biāo)簽的使用 ，有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下
最近做的微信分享頁(yè)面中有大量的語(yǔ)音播放和視頻展示，相關(guān)的好多方法屬性以前都沒(méi)接觸過(guò)，現(xiàn)在記錄下來(lái)！
1. 首先，了解關(guān)于兩個(gè)標(biāo)簽的基本信息：
兩個(gè)標(biāo)簽的基本屬性：
| 屬性 | 描述 |
|---|
| audioTracks | 返回表示可用音軌的 AudioTrackList 對(duì)象 |
| autoplay | 設(shè)置或返回是否在加載完成后隨即播放音頻/視頻 |
| buffered | 返回表示音頻/視頻已緩沖部分的 TimeRanges 對(duì)象 |
| controller | 返回表示音頻/視頻當(dāng)前媒體控制器的 MediaController 對(duì)象 |
| 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)前音頻/視頻的長(zhǎng)度（以秒計(jì)） |
| ended | 返回音頻/視頻的播放是否已結(jié)束 |
| error | 返回表示音頻/視頻錯(cuò)誤狀態(tài)的 MediaError 對(duì)象 |
| loop | 設(shè)置或返回音頻/視頻是否應(yīng)在結(jié)束時(shí)重新播放 |
| mediaGroup | 設(shè)置或返回音頻/視頻所屬的組合（用于連接多個(gè)音頻/視頻元素） |
| muted | 設(shè)置或返回音頻/視頻是否靜音 |
| networkState | 返回音頻/視頻的當(dāng)前網(wǎng)絡(luò)狀態(tài) |
| paused | 設(shè)置或返回音頻/視頻是否暫停 |
| playbackRate | 設(shè)置或返回音頻/視頻播放的速度 |
| played | 返回表示音頻/視頻已播放部分的 TimeRanges 對(duì)象 |
| preload | 設(shè)置或返回音頻/視頻是否應(yīng)該在頁(yè)面加載后進(jìn)行加載 |
| readyState | 返回音頻/視頻當(dāng)前的就緒狀態(tài) |
| seekable | 返回表示音頻/視頻可尋址部分的 TimeRanges 對(duì)象 |
| seeking | 返回用戶是否正在音頻/視頻中進(jìn)行查找 |
| src | 設(shè)置或返回音頻/視頻元素的當(dāng)前來(lái)源 |
| startDate | 返回表示當(dāng)前時(shí)間偏移的 Date 對(duì)象 |
| textTracks | 返回表示可用文本軌道的 TextTrackList 對(duì)象 |
| videoTracks | 返回表示可用視頻軌道的 VideoTrackList 對(duì)象 |
| volume | 設(shè)置或返回音頻/視頻的音量 |
兩個(gè)標(biāo)簽的基本方法：
| 方法 | 描述 |
|---|
| addTextTrack() | 向音頻/視頻添加新的文本軌道 |
| canPlayType() | 檢測(cè)瀏覽器是否能播放指定的音頻/視頻類型 |
| load() | 重新加載音頻/視頻元素 |
| play() | 開(kāi)始播放音頻/視頻 |
| pause() | 暫停當(dāng)前播放的音頻/視頻 |
兩個(gè)標(biāo)簽中的事件：
| 事件 | 描述 |
|---|
| abort | 當(dāng)音頻/視頻的加載已放棄時(shí) |
| canplay | 當(dāng)瀏覽器可以播放音頻/視頻時(shí) |
| canplaythrough | 當(dāng)瀏覽器可在不因緩沖而停頓的情況下進(jìn)行播放時(shí) |
| durationchange | 當(dāng)音頻/視頻的時(shí)長(zhǎng)已更改時(shí) |
| emptied | 當(dāng)目前的播放列表為空時(shí) |
| ended | 當(dāng)目前的播放列表已結(jié)束時(shí) |
| error | 當(dāng)在音頻/視頻加載期間發(fā)生錯(cuò)誤時(shí) |
| loadeddata | 當(dāng)瀏覽器已加載音頻/視頻的當(dāng)前幀時(shí) |
| loadedmetadata | 當(dāng)瀏覽器已加載音頻/視頻的元數(shù)據(jù)時(shí) |
| loadstart | 當(dāng)瀏覽器開(kāi)始查找音頻/視頻時(shí) |
| pause | 當(dāng)音頻/視頻已暫停時(shí) |
| play | 當(dāng)音頻/視頻已開(kāi)始或不再暫停時(shí) |
| playing | 當(dāng)音頻/視頻在已因緩沖而暫�；蛲Ｖ购笠丫途w時(shí) |
| progress | 當(dāng)瀏覽器正在下載音頻/視頻時(shí) |
| ratechange | 當(dāng)音頻/視頻的播放速度已更改時(shí) |
| seeked | 當(dāng)用戶已移動(dòng)/跳躍到音頻/視頻中的新位置時(shí) |
| seeking | 當(dāng)用戶開(kāi)始移動(dòng)/跳躍到音頻/視頻中的新位置時(shí) |
| stalled | 當(dāng)瀏覽器嘗試獲取媒體數(shù)據(jù)，但數(shù)據(jù)不可用時(shí) |
| suspend | 當(dāng)瀏覽器刻意不獲取媒體數(shù)據(jù)時(shí) |
| timeupdate | 當(dāng)目前的播放位置已更改時(shí) |
| volumechange | 當(dāng)音量已更改時(shí) |
| waiting | 當(dāng)視頻由于需要緩沖下一幀而停止 |
2. 在項(xiàng)目中的使用：在視頻沒(méi)有加載出來(lái)的時(shí)候需要顯示這個(gè)視頻的第一幀圖片，我這里第一幀圖片是后臺(tái)傳過(guò)來(lái)的，查了相關(guān)資料原來(lái)video標(biāo)簽有個(gè)屬性poster專門用來(lái)顯示視頻的第一幀圖片，相當(dāng)于視頻封面圖。poster 屬性用于設(shè)置或返回視頻的 poster 屬性值。這個(gè)屬性描述了在視頻加載時(shí)或在用戶點(diǎn)擊播放按鈕前顯示的圖片。如果不包含該屬性，視頻的第一幀將被用來(lái)代替顯示。
<p class="newsInfo" v-for=" item in newsFragment">
<p class="text">{{item.fragment_text_describe}}</p>
<p v-if="item.fragmentFile" v-for="items in item.fragmentFile">
<img v-if="items.fragment_type==1" :src="items.fragment_url" alt="">
<video v-else :poster="items.fileCover" controls :src="items.fragment_url"></video>
</p>
</p>在音頻播放的時(shí)候?yàn)g覽器不一定支持該種類型的音頻，所以要做一個(gè)判斷：用canPlayType() 方法檢查瀏覽器是否能播放指定的音頻/視頻類型。canPlayType() 方法可返回下列值之一：
"probably" - 瀏覽器最可能支持該音頻/視頻類型
"maybe" - 瀏覽器也許支持該音頻/視頻類型
"" - （空字符串）瀏覽器不支持該音頻/視頻類型
使用語(yǔ)法：
audio.canPlayType("mp3"))相關(guān)推薦：
深入了解HTML5之sessionStorage對(duì)象
HTML5的video標(biāo)簽操作視頻詳解
以上就是HTML5中audio與video標(biāo)簽的使用 的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
