前面我們學習了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 | 正在下載指定的音訊視訊時,發生此事件 |
abort##當音訊視訊終止載入時,發生此事件 |
|
ended
音訊視訊播放完成後,發生此事件 |
|
error
音訊、視訊載入錯誤時,發生此事件 |
|
pause
音訊視訊暫停時,發生此事件 |
|
play
開始播放時,發生此事件 |
|
playing
因緩衝而暫停或停止後已就緒時觸發此事件 |
|
ratechange
音訊視訊播放速度發生改變時,發生此事件 |
|
seeked
用戶已移動、跳躍到音訊視訊中的新位置時,發生此事件 |
|
seeking
用戶開始移動、跳躍到新的音訊視訊播放位置時,發生此事件 |
|
stalled
瀏覽器嘗試取得媒體數據,但在資料無法使用時觸發此事件 |
|
suspend
瀏覽器故意不載入媒體資料時觸發此事件 |
|
timeupdate
#播放位置改變時觸發此事件 |
|
|
|
|
|
# volumechange音量改變時觸發此事件
waiting
影片由於需要緩衝而停止時觸發此事件
######【相關建議】######1. ###詳情html5的video標籤測試應用程式#########2. ###html 5中使用video元素製作一個影片播放器#########3. ###分享一個video標籤無法播放mp4的問題以及解決方案#########4. ###H5 video標籤只能放聲音不能放影片的解決方法#########5.### IIS的MIME未註冊MP4類型,導致無法辨識vidoe標籤的解決方案#######
以上是HTML5多媒體audio和video詳細介紹(二)的詳細內容。更多資訊請關注PHP中文網其他相關文章!