建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
小編給大家分享一下HTML5中audio與video標(biāo)簽怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
站在用戶(hù)的角度思考問(wèn)題，與客戶(hù)深入溝通，找到長(zhǎng)春網(wǎng)站設(shè)計(jì)與長(zhǎng)春網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品，建站類(lèi)型包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋長(zhǎng)春地區(qū)。
最近做的微信分享頁(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 | 返回用戶(hù)是否正在音頻/視頻中進(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è)瀏覽器是否能播放指定的音頻/視頻類(lèi)型 |
| 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)音頻/視頻在已因緩沖而暫停或停止后已就緒時(shí) |
| progress | 當(dāng)瀏覽器正在下載音頻/視頻時(shí) |
| ratechange | 當(dāng)音頻/視頻的播放速度已更改時(shí) |
| seeked | 當(dāng)用戶(hù)已移動(dòng)/跳躍到音頻/視頻中的新位置時(shí) |
| seeking | 當(dāng)用戶(hù)開(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專(zhuān)門(mén)用來(lái)顯示視頻的第一幀圖片，相當(dāng)于視頻封面圖。poster 屬性用于設(shè)置或返回視頻的 poster 屬性值。這個(gè)屬性描述了在視頻加載時(shí)或在用戶(hù)點(diǎn)擊播放按鈕前顯示的圖片。如果不包含該屬性，視頻的第一幀將被用來(lái)代替顯示。
{{item.fragment_text_describe}}
![]()
在音頻播放的時(shí)候?yàn)g覽器不一定支持該種類(lèi)型的音頻，所以要做一個(gè)判斷：用canPlayType() 方法檢查瀏覽器是否能播放指定的音頻/視頻類(lèi)型。canPlayType() 方法可返回下列值之一：
"probably" - 瀏覽器最可能支持該音頻/視頻類(lèi)型
"maybe" - 瀏覽器也許支持該音頻/視頻類(lèi)型
"" - （空字符串）瀏覽器不支持該音頻/視頻類(lèi)型
使用語(yǔ)法：
audio.canPlayType("mp3"))以上是“HTML5中audio與video標(biāo)簽怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站題目：HTML5中audio與video標(biāo)簽怎么用
網(wǎng)站URL：http://www.dlmjj.cn/article/ihipoe.html
