HTML5的學習之媒體元素
前幾篇博客我們將HTML5中的canvas畫布元素進行了講解,接下來開始學習其他的HTML5新元素。這篇就博文主要講解HTML5中的媒體元素 <video> 和 <audio> 。
HTML代碼:
<!-- 視頻 -->
<video src="../js練習/英雄聯盟.mp4" controls autoplay></video>
<video controls>
<source src="../js練習/英雄聯盟.mp4" type="video/mp4">
<source src="../js練習/英雄聯盟.ogg" type="video/ogg">
</video>
<!-- 音頻 -->
<audio src="../js練習/誰聽一夜相思雨.mp3" controls loop></audio>
<audio controls>
<source src="../js練習/誰聽一夜相思雨.mp3" type="audio/mp3">
當前瀏覽器不支持音頻播放。
</audio>
<br>
<button>開始播放</button>
<button>暫停播放</button>
<button>重新加載</button>
JavaScript代碼:
document.getElementsByTagName("video")[0].onplay=function(){
console.log("當前視頻開始播放");
}
document.getElementsByTagName("video")[0].onpause=function(){
console.log("當前視頻已經暫停");
}
document.getElementsByTagName("button")[0].onclick=function(){
document.getElementsByTagName("video")[0].play();
}
document.getElementsByTagName("button")[1].onclick=function(){
document.getElementsByTagName("video")[0].pause();
}
document.getElementsByTagName("button")[2].onclick=function(){
document.getElementsByTagName("video")[0].load();
}
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 | 當視頻由於需要緩衝下一幀而停止時觸發。 |
視頻講解鏈接:
https://www.bilibili.com/video/BV1Fa4y1Y75a/