HTML5中audio與video標(biāo)簽怎么用

小編給大家分享一下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)造個(gè)性化、用戶體驗(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)于兩個(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)前音頻/視頻的長度（以秒計(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)該在頁面加載后進(jìn)行加載
readyState	返回音頻/視頻當(dāng)前的就緒狀態(tài)
seekable	返回表示音頻/視頻可尋址部分的 TimeRanges 對(duì)象
seeking	返回用戶是否正在音頻/視頻中進(jìn)行查找
src	設(shè)置或返回音頻/視頻元素的當(dāng)前來源
startDate	返回表示當(dāng)前時(shí)間偏移的 Date 對(duì)象
textTracks	返回表示可用文本軌道的 TextTrackList 對(duì)象
videoTracks	返回表示可用視頻軌道的 VideoTrackList 對(duì)象
volume	設(shè)置或返回音頻/視頻的音量

兩個(gè)標(biāo)簽的基本方法：

方法	描述
addTextTrack()	向音頻/視頻添加新的文本軌道
canPlayType()	檢測(cè)瀏覽器是否能播放指定的音頻/視頻類型
load()	重新加載音頻/視頻元素
play()	開始播放音頻/視頻
pause()	暫停當(dāng)前播放的音頻/視頻

兩個(gè)標(biāo)簽中的事件：

事件	描述
abort	當(dāng)音頻/視頻的加載已放棄時(shí)
canplay	當(dāng)瀏覽器可以播放音頻/視頻時(shí)
canplaythrough	當(dāng)瀏覽器可在不因緩沖而停頓的情況下進(jìn)行播放時(shí)
durationchange	當(dāng)音頻/視頻的時(shí)長已更改時(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)瀏覽器開始查找音頻/視頻時(shí)
pause	當(dāng)音頻/視頻已暫停時(shí)
play	當(dāng)音頻/視頻已開始或不再暫停時(shí)
playing	當(dāng)音頻/視頻在已因緩沖而暫停或停止后已就緒時(shí)
progress	當(dāng)瀏覽器正在下載音頻/視頻時(shí)
ratechange	當(dāng)音頻/視頻的播放速度已更改時(shí)
seeked	當(dāng)用戶已移動(dòng)/跳躍到音頻/視頻中的新位置時(shí)
seeking	當(dāng)用戶開始移動(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)目中的使用：在視頻沒有加載出來的時(shí)候需要顯示這個(gè)視頻的第一幀圖片，我這里第一幀圖片是后臺(tái)傳過來的，查了相關(guān)資料原來video標(biāo)簽有個(gè)屬性poster專門用來顯示視頻的第一幀圖片，相當(dāng)于視頻封面圖。poster 屬性用于設(shè)置或返回視頻的 poster 屬性值。這個(gè)屬性描述了在視頻加載時(shí)或在用戶點(diǎn)擊播放按鈕前顯示的圖片。如果不包含該屬性，視頻的第一幀將被用來代替顯示。

<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" - 瀏覽器也許支持該音頻/視頻類型

"" - （空字符串）瀏覽器不支持該音頻/視頻類型

使用語法：

audio.canPlayType("mp3"))

以上是“HTML5中audio與video標(biāo)簽怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：HTML5中audio與video標(biāo)簽怎么用
網(wǎng)頁鏈接：http://muchs.cn/article4/ihipoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)站收錄、品牌網(wǎng)站設(shè)計(jì)、小程序開發(fā)、品牌網(wǎng)站制作、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)