最近做的微信分享頁面中有大量的語音播放和視頻展示，相關的好多方法屬性以前都沒接觸過，現在記錄下來！

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對象

volume設置或返回音頻/視頻的音量

兩個標簽的基本方法：

方法描述

addTextTrack()向音頻/視頻添加新的文本軌道

canPlayType()檢測瀏覽器是否能播放指定的音頻/視頻類型

load()重新加載音頻/視頻元素

play()開始播放音頻/視頻

pause()暫停當前播放的音頻/視頻

兩個標簽中的事件：

事件描述

abort當音頻/視頻的加載已放棄時

canplay當瀏覽器可以播放音頻/視頻時

canplaythrough當瀏覽器可在不因緩沖而停頓的情況下進行播放時

durationchange當音頻/視頻的時長已更改時

emptied當目前的播放列表為空時

ended當目前的播放列表已結束時

error當在音頻/視頻加載期間發生錯誤時

loadeddata當瀏覽器已加載音頻/視頻的當前幀時

loadedmetadata當瀏覽器已加載音頻/視頻的元數據時

loadstart當瀏覽器開始查找音頻/視頻時

pause當音頻/視頻已暫停時

play當音頻/視頻已開始或不再暫停時

playing當音頻/視頻在已因緩沖而暫停或停止后已就緒時

progress當瀏覽器正在下載音頻/視頻時

ratechange當音頻/視頻的播放速度已更改時

seeked當用戶已移動/跳躍到音頻/視頻中的新位置時

seeking當用戶開始移動/跳躍到音頻/視頻中的新位置時

stalled當瀏覽器嘗試獲取媒體數據，但數據不可用時

suspend當瀏覽器刻意不獲取媒體數據時

timeupdate當目前的播放位置已更改時

volumechange當音量已更改時

waiting

當視頻由于需要緩沖下一幀而停止

2.在項目中的使用：在視頻沒有加載出來的時候需要顯示這個視頻的第一幀圖片，我這里第一幀圖片是后臺傳過來的，查了相關資料原來video標簽有個屬性poster專門用來顯示視頻的第一幀圖片，相當于視頻封面圖。poster屬性用于設置或返回視頻的poster屬性值。這個屬性描述了在視頻加載時或在用戶點擊播放按鈕前顯示的圖片。如果不包含該屬性，視頻的第一幀將被用來代替顯示。

{{item.fragment_text_describe}}

在音頻播放的時候瀏覽器不一定支持該種類型的音頻，所以要做一個判斷：用canPlayType()方法檢查瀏覽器是否能播放指定的音頻/視頻類型。canPlayType()方法可返回下列值之一：

"probably"-瀏覽器最可能支持該音頻/視頻類型

"maybe"-瀏覽器也許支持該音頻/視頻類型

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

使用語法：

audio.canPlayType("mp3"))

本文轉載自中文網

總結

以上是生活随笔為你收集整理的audio标签控制音量_HTML5中audio与video标签的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。