最近做的微信分享頁面中有大量的語音播放和視頻展示，相關的好多方法屬性以前都沒接觸過，現在記錄下來！
1. 首先，了解關于兩個標簽的基本信息：
兩個標簽的基本屬性：
屬性描述audioTracks返回表示可用音軌的 AudioTrackList 對象autoplay設置或返回是否在加載完成后隨即播放音頻/視頻buffered返回表示音頻/視頻已緩沖部分的 TimeRanges 對象controller返回表示音頻/視頻當前媒體控制器的 MediaController 對象controls設置或返回音頻/視頻是否顯示控件（比如播放/暫停等）crossOrigin設置或返回音頻/視頻的 CORS 設置html' target='_blank'>currentSrc返回當前音頻/視頻的 URLcurrentTime設置或返回音頻/視頻中的當前播放位置（以秒計）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 屬性值。這個屬性描述了在視頻加載時或在用戶點擊播放按鈕前顯示的圖片。如果不包含該屬性，視頻的第一幀將被用來代替顯示。
p >在音頻播放的時候瀏覽器不一定支持該種類型的音頻，所以要做一個判斷：用canPlayType() 方法檢查瀏覽器是否能播放指定的音頻/視頻類型。canPlayType() 方法可返回下列值之一：
probably - 瀏覽器最可能支持該音頻/視頻類型
maybe - 瀏覽器也許支持該音頻/視頻類型- （空字符串）瀏覽器不支持該音頻/視頻類型
使用語法：
audio.canPlayType( mp3 ))相關推薦：
深入了解HTML5之sessionStorage對象
HTML5的video標簽操作視頻詳解
以上就是HTML5中audio與video標簽的使用 的詳細內容，html教程
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
新聞熱點
疑難解答
