HTML5的video和audio

HTML5的video和audio

從理論上來講，HTML5引入的<audio>和<video>元素，使用起來和<img>元素同樣簡單。對於支持HTML5的瀏覽器，再也不須要使用插件（像flash）來在HTML文檔中嵌入音頻和視頻：

<audio src="background_music.mp3"'>
<video src="news.mov" width=320 height=240>

實際上，使用這些元素的時候要更加巧妙。因爲各家瀏覽器製造商未能在對標準音頻和視頻編碼支持上達成一致，所以，一般須要使用<source>元素來爲指定不一樣格式的媒體源：

<audio id="music">
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type='audio/ogg;codec="vorbis"'>
</audio>

經常使用媒體事件
<audio>和<video>元素最重要的方法是play()和pause()方法，它們用來控制媒體開始和暫停媒體的播放。
以音頻爲例：

<audio id="music">
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type='audio/ogg;codec="vorbis"'>
</audio>
let audio = document.getElementById('music')
//開始播放音頻
audio.play()
//暫停播放音頻
audio.pause()
    //監聽暫停播放事件
    audio.addEventListener('pause', function (e) {
    console.log('暫停播放啦')
 })
//監聽開始播放事件
audio.addEventListener('pause', function (e) {
    console.log('開始播放啦')
})
//監聽媒體數據已經加載完成事件
audio.addEventListener('loadedmetadata', function (e) {
    console.log('音頻時長：'+e.target.duration）
});
//監聽currentTime屬性發生改變了
audio.addEventListener('timeupdate', function (e) {
    console.log('剩餘播放時長：'+（e.target.duration - e.target.currentTime)）
}, false);   
audio.addEventListener('ended', function (e) {
    console.log('播放完成啦')
}, false);

經常使用媒體屬性
currentTime：該屬性指定了播放器應該跳過播放的時間（單位爲秒）
volume：該屬性表示播放音量，介於0（靜音）~1（最大音量）之間
muted：該屬性表示是否設置爲靜音模式。若爲true則會進入靜音模式，若爲false則會恢復以前指定的音量繼續播放。
playbackRate：該屬性用於指定媒體播放的速度。1.0表示正常速度，大於1則表示「快進」，0~1之間的值則表示「慢放」。
controls：該屬性指定是否在瀏覽器中顯示播放控件。若爲true則顯示控件，反之則隱藏控件。
loop：該屬性指定媒體是否須要循環播放。若爲true則表示須要循環播放，反之則表示播放到最後就中止。
proload：該屬性指定在用戶開始播放媒體前，是否或者多少媒體內容須要預加載。

「none」：表示不須要預加載數據
「metadata」：表示諸如時長、比特率、幀大小這樣的元數據須要加載。（瀏覽器默認加載這些數據。）
「auto」：瀏覽器應當預加載它認爲適量的媒體內容

autoplay：該屬性指定當已經緩存足夠多的媒體內容時是否須要自動開始播放。將該屬性設置爲true就等於告訴瀏覽器須要預加載媒體內容。

經常使用媒體狀態
duration：該屬性指定了媒體的時長，單位是秒
played：該屬性返回已經播放的時間段。
buffered：該屬性返回當前已經緩衝的時間段。
seekable：該屬性返回當前播放器須要跳到的時間段。
played，buffered，seekable都是TimeRanges對象。每一個對象都有一個length屬性以及start()和end()方法，前者表示當前的一個時間段，後者分別返回當前時間段的起始時間點和結束時間點（單位都是秒）。
readyState：該屬性返回音頻/視頻的當前就緒狀態

常量	值	描述
HAVE_NOTHING	0	沒有關於音頻/視頻是否就緒的信息
HAVE_METADATA	1	音頻/視頻已初始化
HAVE_CURRENT_DATA	2	數據已經能夠播放(當前位置已經加載) 但沒有數據能播放下一幀的內容
HAVE_FUTURE_DATA	3	當前及至少下一幀的數據是可用的(換句話來講至少有兩幀的數據)
HAVE_ENOUGH_DATA	4	可用數據足以開始播放-若是網速獲得保障 那麼視頻能夠一直播放到底

networkState ：屬性表示在網絡上獲取媒體的當前狀態

常量	值	描述
NETWORK_EMPTY	0	尚未數據。而且 readyState 的值是 HAVE_NOTHING。
NETWORK_IDLE	1	HTMLMediaElement 是有效的而且已經選擇了一個資源,，可是尚未使用網絡。
NETWORK_LOADING	2	瀏覽器正在下載 HTMLMediaElement 數據。
NETWORK_NO_SOURCE	3	沒有找到 HTMLMediaElement src。

error：描述加載媒體或者播放媒體過程當中發生的錯誤。如沒有發生錯誤，則爲null；反之，則爲一個對象，包含了描述錯誤的數組code屬性。同時，error對象也定義了一些描述可能的錯誤代碼的常量：

常量	值	描述
MEDIA_ERR_ABORTED	1	用戶要求瀏覽器中止加載媒體內容
MEDIA_ERR_NETWORK	2	媒體類型正確，可是發生了網絡錯誤致使沒法加載
MEDIA_ERR_DECODE	3	媒體類型正確，可是因爲編碼錯誤致使沒法正常解碼和播放
MEDIA_ERR__NOT_SUPPORTED	4	經過src屬性指定的媒體文件瀏覽器不支持，沒法播放

交流與學習qq:759020213