HTML5 之多媒體

itwangchen發表於2019-03-22

多媒體

AUTOPLAY如果出現該屬性,則視訊在就緒後馬上播放。
controls如果出現該屬性,則向使用者顯示控制元件,比如播放按鈕 。
loop如果出現該屬性,則當媒介檔案完成播放後再次開始播放。
src要播放的視訊的 URL。
poster指定視訊的封面圖片
muted靜音

自定義播放器

方法

方法描述
addTextTrack()向音訊/視訊新增新的文字軌道
canPlayType()檢測瀏覽器是否能播放指定的音訊/視訊型別
load()重新載入音訊/視訊元素
play()開始播放音訊/視訊
pause()暫停當前播放的音訊/視訊

屬性

屬性描述
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設定或返回音訊/視訊的音量

事件

事件描述
abort當音訊/視訊的載入已放棄時
canplay當瀏覽器可以播放音訊/視訊時
canplaythrough當瀏覽器可在不因緩衝而停頓的情況下進行播放時
durationchange當音訊/視訊的時長已更改時
emptied當目前的播放列表為空時
ended當目前的播放列表已結束時
error當在音訊/視訊載入期間發生錯誤時
loadeddata當瀏覽器已載入音訊/視訊的當前幀時
loadedmetadata當瀏覽器已載入音訊/視訊的後設資料時
loadstart當瀏覽器開始查詢音訊/視訊時
pause當音訊/視訊已暫停時
play當音訊/視訊已開始或不再暫停時
playing當音訊/視訊在已因緩衝而暫停或停止後已就緒時
progress當瀏覽器正在下載音訊/視訊時
ratechange當音訊/視訊的播放速度已更改時
seeked當使用者已移動/跳躍到音訊/視訊中的新位置時
seeking當使用者開始移動/跳躍到音訊/視訊中的新位置時
stalled當瀏覽器嘗試獲取媒體資料,但資料不可用時
suspend當瀏覽器刻意不獲取媒體資料時
timeupdate當視訊的播放位置更改時
volumechange當音量已更改時
waiting當視訊由於需要緩衝下一幀而停止


相關文章