HTML5 API 之video/audio 視訊/音訊
video的使用方法:
<video autoplay="autoplay" controls="controls" width="800" muted="muted" loop="loop" poster="/images/w3html5.gif">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
你的瀏覽器不支援video標籤
</video>
視訊常用標籤屬性:
autoplay:自動播放
controls:視訊操作控制元件
muted:靜音
loop:迴圈播放
poster:載入完成前顯示的圖片
音訊的使用方法
<audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
<source src="http://www.w3cschool.cc/try/demo_source/horse.mp3" type="audio/mpeg">
<source src="http://www.w3cschool.cc/try/demo_source/horse.ogg" type="audio/ogg">
</audio>
音訊常用標籤屬性:
autoplay:自動播放
controls:視訊操作控制元件
muted:靜音
loop:迴圈播放
視訊/音訊共同特性
<source> 標籤允許您規定可替換的視訊/音訊檔案供瀏覽器根據它對媒體型別或者編解碼器的支援進行選擇。
你的瀏覽器不支援video標籤
可以在開始標籤和結束標籤之間放置文字內容,這樣老的瀏覽器就可以顯示出不支援該標籤的資訊。
HTML 音訊/視訊 方法
方法 | 描述 |
addTextTrack() | 向音訊/視訊新增新的文字軌道。 |
canPlayType() | 檢測瀏覽器是否能播放指定的音訊/視訊型別。 |
load() | 重新載入音訊/視訊元素。 |
play() | 開始播放音訊/視訊。 |
pause() | 暫停當前播放的音訊/視訊。 |
HTML 音訊/視訊屬性
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 | 設定或返回音訊/視訊的音量。 |
HTML 音訊/視訊事件
事件 | 描述 |
abort | 當音訊/視訊的載入已放棄時觸發。 |
canplay | 當瀏覽器可以開始播放音訊/視訊時觸發。 |
canplaythrough | 當瀏覽器可在不因緩衝而停頓的情況下進行播放時觸發。 |
durationchange | 當音訊/視訊的時長已更改時觸發。 |
emptied | 當目前的播放列表為空時觸發。 |
ended | 當目前的播放列表已結束時觸發。 |
error | 當在音訊/視訊載入期間發生錯誤時觸發。 |
loadeddata | 當瀏覽器已載入音訊/視訊的當前幀時觸發。 |
loadedmetadata | 當瀏覽器已載入音訊/視訊的元資料時觸發。 |
loadstart | 當瀏覽器開始查詢音訊/視訊時觸發。 |
pause | 當音訊/視訊已暫停時觸發。 |
play | 當音訊/視訊已開始或不再暫停時觸發。 |
playing | 當音訊/視訊在因緩衝而暫停或停止後已就緒時觸發。 |
progress | 當瀏覽器正在下載音訊/視訊時觸發。 |
ratechange | 當音訊/視訊的播放速度已更改時觸發。 |
seeked | 當用戶已移動/跳躍到音訊/視訊中的新位置時觸發。 |
seeking | 當用戶開始移動/跳躍到音訊/視訊中的新位置時觸發。 |
stalled | 當瀏覽器嘗試獲取媒體資料,但資料不可用時觸發。 |
suspend | 當瀏覽器刻意不獲取媒體資料時觸發。 |
timeupdate | 當目前的播放位置已更改時觸發。 |
volumechange | 當音量已更改時觸發。 |
waiting | 當視訊由於需要緩衝下一幀而停止時觸發。 |