audio和video的用法

audio方法 方法描述

addTextTrack() 爲音視頻加入一個新的文本軌跡

canPlayType() 檢查指定的音視頻格式是否獲得支持

load() 從新加載音視頻標籤

play() 播放音視頻

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

-------------------------

屬性 屬性描述

audioTracks 返回可用的音軌列表（MultipleTrackList對象）

autoplay 媒體加載後自動播放

buffered 返回緩衝部件的時間範圍(TimeRanges對象)

controller 返回當前的媒體控制器（MediaController對象）

controls 顯示播控控件

crossOrigin <a href="https://www.baidu.com/s?wd=CORS&tn=44039180_cpr&

fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWF9uhw9uHI-mHR3rymY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHf4PjT1nj

csP1TsPHRsrjn1rf" target="_blank" class="baidu-highlight">CORS</a>設置

currentSrc 返回當前媒體的URL

currentTime 當前播放的時間，單位秒

defaultMuted 缺省是否<a href="https://www.baidu.com/s?wd=%E9%9D%99%E9%9F%B3&tn=44039180_cpr&

fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWF9uhw9uHI-mHR3rymY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHf4PjT1nj

csP1TsPHRsrjn1rf" target="_blank" class="baidu-highlight">靜音</a>

defaultPlaybackRate 播控的缺省倍速

duration 返回媒體的播放總時長，單位秒

ended 返回當前播放是否結束標誌

error 返回當前播放的錯誤狀態

initialTime 返回初始播放的位置

loop 是否循環播放

mediaGroup 當前音視頻所屬媒體組 (用來連接多個音視頻標籤)

muted 是否<a href="https://www.baidu.com/s?wd=%E9%9D%99%E9%9F%B3&tn=44039180_cpr&

fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWF9uhw9uHI-mHR3rymY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHf4PjT1nj

csP1TsPHRsrjn1rf" target="_blank" class="baidu-highlight">靜音</a>

networkState 返回當前網絡狀態

paused 是否暫停

playbackRate 播放的倍速

played 當前播放部件已經播放的時間範圍(TimeRanges對象)

preload 頁面加載時是否同時加載音視頻

readyState 返回當前的準備狀態

seekable 返回當前可跳轉部件的時間範圍(TimeRanges對象)

seeking 返回用戶是否作了跳轉操做

src 當前音視頻源的URL

startOffsetTime 返回當前的時間偏移(Date對象)

textTracks 返回可用的文本軌跡(TextTrackList對象)

videoTracks 返回可用的視頻軌跡(VideoTrackList對象)

volume 音量值

事件

事件描述

abort 當音視頻加載被異常終止時產生該事件

canplay 當瀏覽器能夠開始播放該音視頻時產生該事件

canplaythrough 當瀏覽器能夠開始播放該音視頻到結束而無需因緩衝而中止時產生該事件

durationchange 當媒體的總時長改變時產生該事件

emptied 當前播放列表爲空時產生該事件

ended 當前播放列表結束時產生該事件

error 當加載媒體發生錯誤時產生該事件

loadeddata 當加載媒體數據時產生該事件

loadedmetadata 當收到總時長，分辨率<a href="https://www.baidu.com/s?wd=%E5%92%8C%E5%AD%97&tn=44039180_cpr&

fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWF9uhw9uHI-mHR3rymY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHf4PjT1nj

csP1TsPHRsrjn1rf" target="_blank" class="baidu-highlight">和字</a>軌等metadata時產生該事件

loadstart 當開始查找媒體數據時產生該事件

pause 當媒體暫停時產生該事件

play 當媒體播放時產生該事件

playing 當媒體從因緩衝而引發的暫停和中止恢復到播放時產生該事件

progress 當獲取到媒體數據時產生該事件

ratechange 當播放倍數改變時產生該事件

seeked 當用戶完成跳轉時產生該事件

seeking 當用戶正執行跳轉時操做的時候產生該事件

stalled 當試圖獲取媒體數據，但數據還不可用時產生該事件

suspend 當獲取不到數據時產生該事件

timeupdate 當前播放位置發生改變時產生該事件

volumechange 當前音量發生改變時產生該事件

waiting 當視頻因緩衝下一幀而中止時產生該事件

video和audio相似

<video id="videoID" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"

width="100%" height="100%" preload="auto" poster="" src=""></video>

關於video標籤我也踩過幾回坑,當設置了controls屬性,而有些按鈕並未出現,多是客戶端禁掉了.

1.經常使用的屬性:webkit-playsinline="true",playsinline 這個主要是爲了解決ios自動全屏的問題

2.如今使用video寫的視頻播放,在ios系統的uc瀏覽器仍是會自動全屏的(uc強制全屏),暫時還沒找到解決方案

3.當使用video在瀏覽器中點擊播放而後暫停時,封面有時會消失(代碼自己應該出現的),是由於瀏覽器在解析的時候把video標籤頂到了最上面

解決方案:點擊暫停時,把video標籤隱藏掉(display:none),不要直接刪掉,有些瀏覽器直接刪掉的話,繼續播放會從頭開始播放

4.華爲mete8 在禁止循環播放的狀況下,手動拖動到最後會自動重頭播放. 注:每款手機對手動拖動到最後解析出來的結果不同(部分手機會自動往前跳幾秒鐘)