首頁 >web前端 >H5教程 >HTML5多媒體audio和video詳細介紹(二)

HTML5多媒體audio和video詳細介紹(二)

黄舟
黄舟原創
2017-05-19 16:55:381988瀏覽

前面我們學習了audio和video最基本的用法,為了更靈活的控制音影片的播放,我們就需要學習HTML5為我們提供的相關屬性、方法和事件了。

audio和video相關屬性

##描述#src用於指定媒體資源的URL位址#autoplay資源載入後自動播放buffered用於傳回一個TimeRanges對象,確認瀏覽器已經快取媒體檔案。 controls提供用於播放的控制條currentSrc#傳回媒體資料的URL位址currentTime取得或設定目前的播放位置,單位為秒defaultPlaybackRate#返回預設播放速度duration 取得目前媒體的持續時間
#屬性
##loop 設定或傳回是否循環播放
muted 設定或傳回是否靜音
networkState 傳回音訊視頻目前網路狀態
paused 檢查視訊是否已暫停
playbackRate 設定或傳回音頻影片的目前播放速度
played 傳回TimeRanges物件。 TimeRanges表示使用者已經播放的音訊視訊範圍
#preload #設定或傳回是否自動載入音訊視訊資源
readyState 傳回音訊視訊目前就緒狀態
seekable 傳回TimeRanges對象,表示可以對目前媒體資源進行要求
#seeking 傳回是否正在請求資料
valume 設定或傳回音量,值為0到1.0

audio和video相關方法

#方法 描述
canPlayType() 偵測瀏覽器是否能播放指定的音訊、影片
load() #重新載入音訊、視訊元素
pause() 停止目前播放的音訊、視訊
play() 開始播放目前音訊、影片

audio與video相關事件

##canplay 當瀏覽器能夠開始播放指定的音視頻時,發生此事件#canplaythrough當瀏覽器預計能夠在不停下來進行緩衝的情況下持續播放指定的音訊視訊時,發生此事件durationchange當音訊、視訊的時長資料變更時,發生此事件loadeddata當當前幀資料已加載,但沒有足夠的資料來播放指定音訊視訊的下一幀時,會發生此事件loadedmatadata當指定的音訊視訊的元資料已載入時,會發生此事件。元資料包括時長、尺寸(僅視訊)以及文字軌道loadstart當瀏覽器開始尋找指定的音訊視訊時,發生此事件progress正在下載指定的音訊視訊時,發生此事件abortendederrorpause playplayingratechangeseekedseekingstalledsuspendtimeupdate
事件 #描述
##當音訊視訊終止載入時,發生此事件
音訊視訊播放完成後,發生此事件
音訊、視訊載入錯誤時,發生此事件
音訊視訊暫停時,發生此事件
開始播放時,發生此事件
因緩衝而暫停或停止後已就緒時觸發此事件
音訊視訊播放速度發生改變時,發生此事件
用戶已移動、跳躍到音訊視訊中的新位置時,發生此事件
用戶開始移動、跳躍到新的音訊視訊播放位置時,發生此事件
瀏覽器嘗試取得媒體數據,但在資料無法使用時觸發此事件
瀏覽器故意不載入媒體資料時觸發此事件
#播放位置改變時觸發此事件

# volumechange音量改變時觸發此事件

waiting

影片由於需要緩衝而停止時觸發此事件

######【相關建議】######1. ###詳情html5的video標籤測試應用程式#########2. ###html 5中使用video元素製作一個影片播放器#########3. ###分享一個video標籤無法播放mp4的問題以及解決方案#########4. ###H5 video標籤只能放聲音不能放影片的解決方法#########5.### IIS的MIME未註冊MP4類型,導致無法辨識vidoe標籤的解決方案#######

以上是HTML5多媒體audio和video詳細介紹(二)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn