audio和video元素

小火柴的藍色理想發表於2015-12-22
IDE

前面的話

　　HTML5新增了兩個與媒體相關的標籤，讓開發人員不必依賴任何外掛就能在網頁中嵌入跨瀏覽器的音訊和視訊內容，這兩個標籤是<audio>和<video>，且不被IE8-瀏覽器支援

 　  以視訊檔案舉例，它包含了音訊軌道、視訊軌道和其他一些後設資料(封面、標題、子標題、字幕等)

HTML元素

　　使用這兩個元素至少要在標籤中包含src屬性。位於開始和結束標籤之間的任何內容都將作為後備內容，在瀏覽器不支援這兩個媒體元素的情況下顯示

<audio>

autoplay         自動播放
controls         顯示控制元件
loop             迴圈播放
preload          音訊在頁面載入時進行載入，並預備播放(若使用autoplay,則忽略該屬性)
src              要播放的音訊的URL        
<audio controls autoplay loop muted src="song.mp3"> 
  <source src="song.mp3" type="audio/mp3" />
</audio>

　　[注意]<audio>元素不支援播放wma格式的檔案

　　<演示框>點選下列相應屬性值可進行演示

 

<video>

autoplay            自動播放
controls            顯示控制元件
height         　　　播放器高度
width         　　　 播放器寬度
loop                迴圈播放
preload             視訊在頁面載入時進行載入，並預備播放(若使用autoplay,則忽略該屬性)
preload="none"     //當頁面載入後不載入視訊
preload="auto"     //當頁面載入後載入整個視訊
preload="meta"     //當頁面載入後只載入後設資料
src                 要播放的視訊的URL
poster        　　　 規定視訊下載時顯示的影象，或者在使用者點選播放按鈕前顯示的影象    
<video id="test" src="movie.mp4" width="280" height="200" poster="diejia.jpg"></video>

　　<演示框>點選下列相應屬性值可進行演示

 

<source>

　　為<video>和<audio>提供媒介資源

media     規定媒體資源的型別(沒有瀏覽器支援)
src     　規定媒體檔案的URL
type      規定媒體資源的MIME型別

　　常用型別

　　　　視訊 [1]video/ogg [2]video/mp4 [3]video/webm

　　　　音訊 [1]audio/ogg [2]audio/mpeg

　　使用<audio>和<video>至少要在標籤中包含src屬性。位於開始和結束標籤之間的任何內容都將作為後備內容，在瀏覽器不支援這兩個媒體元素的情況下顯示

<video src="#">
    video player not available.
</video>
<audio src="#">
    audio player not available.
</audio>

　　因為並非所有瀏覽器都支援所有媒體格式，所以可以指定多個不同的媒體來源。為此，不用在標籤中指定src屬性，而是使用一個或多個<source>元素

<video>
    <source src="video.webm" type="video/webm; codecs='vp8,vorbis'">
    <source src="video.ogg" type="video/ogg; codecs='theora,vorbis'">
    <source src="video.mp4">
    video player not available.
</video>
<audio>
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.mp3" type="audio/mp3">
    audio player not available.
</audio>

 　　因為並非所有瀏覽器都支援<audio>和<video>標籤，所以更好的解決辦法是有備選內容

<audio controls="controls" height="100" width="100">
    <source src="song.mp3" type="audio/mp3" />
    <embed height="100" width="100" src="song.mp3" />
</audio>
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.mp4" width="320" height="240" />
  </object>
</video>

 

<track>

　　<track>元素被當作媒體元素—<audio>和<video>的子元素來使用。它允許指定計時字幕（或者基於事件的資料），例如自動處理字幕

　　track 給媒體元素新增的資料的型別在kind屬性中設定，屬性值可以是 subtitles, captions, descriptions, chapters 或 metadata。該元素指向當使用者請求額外的資料時瀏覽器公開的包含定時文字的原始檔。一個media元素的任意兩個track子元素不能有相同的 kind、srclang和 label屬性

【default】

　　default屬性規定該軌道是預設的，假如沒有選擇任何軌道

【kind】

　　kind屬性表示軌道屬於什麼文字型別

captions 　　　　該軌道定義將在播放器中顯示的簡短說明
chapters    　　該軌道定義章節，用於導航媒介資源
descriptions   該軌道定義描述，用於通過音訊描述媒介的內容，假如內容不可播放或不可見
metadata    　　該軌道定義指令碼使用的內容
subtitles    　該軌道定義字幕，用於在視訊中顯示字幕

【label】

　　label屬性表示軌道的標籤或標題

【url】

　　URL屬性表示字幕檔案的URL

【srclang】

　　srclang屬性表示軌道的語言，若 kind 屬性值是 "subtitles"，則該屬性必需的。中文為"zh"，英文為"en"

　　字幕檔案書寫格式如下所示，注意，毫秒位的3個0不能省略

WEBVTT

1
00:00:01.000 --> 00:00:08.000
歡迎來到小火柴的個人網站
<video width="320" height="240" controls="controls">
  <source src="mov.mp4" type="video/mp4" />
  <track src="cn_track.vtt" srclang="zh" default kind="captions" label="歡迎你">
  <object data="mov.mp4" width="320" height="240">
    <embed src="mov.mp4" width="320" height="240" />
  </object>
</video>

API

　　HTML5 DOM為<audio>和<video>元素提供了方法、屬性和事件

方法

1、canPlayType()

　　檢測瀏覽器是否能播放指定的音訊或視訊型別，返回值為下列之一：

'probable':瀏覽器最可能支援該型別
'maybe':瀏覽器也許支援該型別
'':瀏覽器不支援該型別
//常用值
video/ogg
video/mp4
video/webm
audio/mpeg
audio/ogg
audio/mp4
video/ogg;codecs="theora,vorbis"
video/mp4;codecs="avc1.4D401E,mp4a.40.2"
video/webm;codecs="vp8.0,vorbis"
audio/ogg;codecs="vorbis"
audio/mp4;codecs="mp4a.40.5"
<audio id="audio" src="song.mp3"></audio>    
<script>
var audio = document.getElementById('audio');
//probably
console.log(audio.canPlayType('video/ogg;codecs="theora,vorbis"'));
</script>

2、load()

　　重新載入音訊或視訊元素，用於在更改src來源或其他設定後對音訊或視訊元素進行更新

<audio id="audio" src="song.mp3" autoplay controls></audio>    
<script>
    var audio = document.getElementById('audio');
    audio.src = 'myocean.mp3';
    audio.load();
</script>

3、play()

　　開始播放音訊或視訊

4、pause()

　　暫停當前播放的音訊或視訊

<button onclick = 'audio.play();'>播放</button>
<button onclick = 'audio.pause();'>暫停</button>
<audio id="audio" src="myocean.mp3" controls></audio>

　　<演示框>點選下列相應屬性值可進行演示

 

屬性

　　[注意]所有屬性中，只有videoWidth和videoHeight是立即可用的，在音視訊的後設資料載入後，其他屬性才可用

【只讀】

1、buffered

buffered.length//獲取已緩衝範圍的數量
buffered.start(index)//獲取某個已緩衝範圍的開始位置
buffered.end(index)//獲取某個已緩衝範圍的結束位置
buffered.end(0)//獲取當前已緩衝的秒數
<button>獲取緩衝時間</button>
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function(){
    alert(audio.buffered.end(0));
}
</script>

2、currentSrc

　　返回當前音訊或視訊的URL

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
var audio = document.getElementById('audio');
//http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3
setInterval(function(){
    console.log(audio.currentSrc);    
},1000); 
</script>

3、ended

　　返回音訊或視訊是否已結束

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
document.onclick = function(){
    console.log(audio.ended);
}    
</script>

4、duration

　　返回當前音訊或視訊的長度(以秒計)，如果未設定則返回NaN

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
//NaN
console.log(audio.duration);
//317.022041
setTimeout(function(){
    console.log(audio.duration);
},1000);

5、networkState

　　返回音訊或視訊當前網路狀態

networkState:0(尚未初始化)
networkState:1(已選取資源，但並未使用網路)
networkState:2(正在下載資料)
networkState:3(未找到資源來源)
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
//3
console.log(audio.networkState)
//1
document.onclick = function(){
    console.log(audio.networkState);
}
</script>

6、paused

　　返回音訊或視訊是否已暫停

paused:true;(已暫停)
paused:false;(未暫停)    
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
console.log(audio.paused)
document.onclick = function(){
    console.log(audio.paused);
}
</script>

7、played

　　已播範圍是指音訊或視訊的時間範圍。如果使用者在音訊或視訊中跳躍，會獲得多個播放範圍

played.length(獲得音訊或視訊已播放範圍的數量)
played.start(index)(獲得某個已播範圍的開始位置)
played.end(index)(獲得某個已播範圍的結束位置)

　　[注意]首段已播範圍的下標是0

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
document.onclick = function(){
    console.log(audio.played.end(0));
}
</script>

8、readyState

　　返回音訊或視訊的當前就緒狀態

readyState:0(沒有關於音訊或視訊是否就緒的資訊)
readyState:1(關於音訊或視訊就緒的後設資料)
readyState:2(關於當前播放位置的資料是可用的，但沒有足夠的資料來播放下一幀)
readyState:3(當前及至少下一幀的資料是可用的)
readyState:4(可用資料足以開始播放)
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
//0
console.log(audio.readyState);
//4
document.onclick = function(){
    console.log(audio.readyState);
}
</script>

9、seekable

　　返回可定址範圍，可定址範圍是指使用者在視訊或音訊中可定址(移動播放位置)的時間範圍。對於流視訊，通常可以定址到視訊中的任何位置，即使其尚未完成緩衝

seekable.length(獲得音訊或視訊中可定址範圍的數量)
seekable.start(index)(獲得可定址範圍的開始位置)
seekable.end(index)(獲得可定址範圍的結束位置)
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
document.onclick = function(){
    console.log(audio.seekable.end(0));
}
</script>

10、seeking

seeking:true(使用者正在定址)
seeking:false(使用者沒有在定址)
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
audio.onseeking = function(){
    console.log(audio.seeking);    
}    
</script>

【可讀寫】

1、autoplay

autoplay:false(預設，不自動播放)
autoplay:true(自動播放)

2、controls

controls:false(預設，不顯示控制元件)
controls:true(顯示控制元件)

3、crossOrigin

　　設定或返回CORS設定

4、currentTime

　　設定或返回音訊或視訊的當前位置(以秒計)

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
var audio = document.getElementById('audio');
document.onclick = function(){
    console.log(audio.currentTime);    
    audio.currentTime = 5;
    console.log(audio.currentTime);
}; 
</script>

5、defaultMuted(只有chrome支援)

defaultMuted:true(初始靜音)
defaultMuted:false(預設，初始不靜音)
audio.defaultMuted = true;

6、muted

muted:true(靜音)
muted:false(不靜音)
<button onclick="audio.muted = !audio.muted">音量開關</button>
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>

7、defaultPlaybackRate

defaultPlaybackRate:1(正常速度)
defaultPlaybackRate:0.5(半速)
defaultPlaybackRate:2(倍速)
defaultPlaybackRate:-1(向後正常速度)
defaultPlaybackRate:-0.5(向後半速)
var audio = document.getElementById('audio');
setTimeout(function(){
    audio.defaultPlaybackRate = 0.5;
    audio.load();    
},1000);

8、playbackRate

playbackRate:1(正常速度)
playbackRate:0.5(半速)
playbackRate:2(倍速)
playbackRate:-1(向後正常速度)
playbackRate:-0.5(向後半速)
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
var array = [-1,-0.5,0.5,1,2];
var i = 0;
var audio = document.getElementById('audio');
document.onclick = function(){
    audio.playbackRate = array[i];
    console.log(audio.playbackRate);
    i++;
    i=i%5;
}

9、loop

loop:true(迴圈播放)
loop:false(預設，不迴圈播放)

10、preload

　　設定或返回是否在頁面載入後立即載入音訊或視訊

preload:auto;(一旦頁面載入，則開始載入音訊或視訊)
preload:metadata;(當頁面載入後僅載入音訊或視訊的後設資料)
preload:none;(頁面載入後不載入音訊或視訊)

　　[注意]當設定autoplay時，該屬性無效

11、src

　　設定或返回音訊或視訊的當前來源

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
console.log(audio.src);
document.onclick = function(){
    console.log(audio.src);
    audio.src = 'http://7xpdkf.com1.z0.glb.clouddn.com/song.mp3';
    audio.load();
    console.log(audio.src);
}    
</script>

12、volume

　　設定或返回音訊或視訊的當前音量

volume(取得為0-1，0為靜音，1為最大，預設為1)    
<button onclick = "if(audio.volume<=0.9)audio.volume+=0.1;">增大音量</button>
<button onclick = "if(audio.volume>=0.1)audio.volume-=0.1;">減小音量</button>
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>

 

事件

　　當音訊或視訊正在載入過程中，會依次發生以下事件：

loadstart:提示瀏覽器開始尋找指定的音訊或視訊
progress:提示瀏覽器正在下載指定的音訊或視訊
durationchange:提示音訊或視訊的時長已改變
loadedmetadata:提示音訊或視訊的後設資料已載入
loadeddata:提示音訊或視訊的當前幀已載入，但沒有足夠資料播放下一幀
canplay:提示瀏覽器能夠開始播放指定的音訊或視訊
canplaythrough:提示音訊或視訊能夠不停頓地一直播放
progress:提示瀏覽器正在下載指定的音訊或視訊
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>    
audio.onloadstart = function(){
    console.log('loadstart');
}
audio.ondurationchange = function(){
    console.log('durationchange');
}    
audio.onloadedmetadata = function(){
    console.log('loadedmetadata');
}    
audio.onloadeddata = function(){
    console.log('loadeddata');
}    
audio.onprogress = function(){
    console.log('progress');
}    
audio.oncanplay = function(){
    console.log('canplay');
}    
audio.oncanplaythrough = function(){
    console.log('canplaythrough');
}    
</script>

　　影響音訊或視訊資料載入的事件有以下幾個：

abort:在音訊或視訊終止載入時觸發
error:在音訊或視訊載入發生錯誤時觸發
stalled:在瀏覽器嘗試獲取媒體資料，但資料不可用時觸發
suspend:在音訊或視訊資料被阻止載入時觸發(可以是完成載入後觸發，或者因為被暫停)
empted:在發生故障並且檔案突然不可用時觸發
<video id="video" src="http://7xpdkf.com1.z0.glb.clouddn.com/movie.mp4" controls></video>
<script>
setTimeout(function(){
    video.src='';
},2000);    
video.onabort = function(){
    console.log('abort');
}
video.onerror = function(){
    console.log('error');
}    
video.onstalled = function(){
    console.log('stalled');
}    
video.onsuspend = function(){
    console.log('suspend');
}    
video.onemptied = function(){
    console.log('emptied');
}
</script>

　　音訊或視訊控制按鈕發生改變時觸發以下事件:

play:音訊或視訊檔案已經就緒可以開始播放時觸發
playing:音訊或視訊已開始播放時觸發
ended:音訊或視訊檔案播放完畢後觸發
pause:音訊或視訊檔案暫停時觸發
ratechange:播放速度改變進觸發
seeked:指示定位已結束時觸發
seeking:正在進行指示定位時觸發
timeupdate:播放位置改變時觸發[注意:播放和調整指示定位時都會觸發]
volumechange:音量改變時觸發
waiting:需要緩衝下一幀而停止時觸發
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/honey.mp3" controls></audio>
<script>    
var i = 1;
document.onclick = function(){
    i+=0.1;
    audio.playbackRate = i;
}
audio.onended = function(){
    console.log('ended');
}
audio.onpause = function(){
    console.log('pause');
}    
audio.onplay = function(){
    console.log('play');
}    
audio.onplaying = function(){
    console.log('playing');
}    
audio.onratechange = function(){
    console.log('ratechange');
}    
audio.onseeked = function(){
    console.log('seeked');
}    
audio.onseeking = function(){
    console.log('seeking');
}    
audio.ontimeupdate = function(){
    console.log('timeupdate');
}    
audio.onvolumechange = function(){
    console.log('volumechange');
}    
audio.onwaiting = function(){
    console.log('waiting');
}    
</script>

 

audio專有

　　<audio>元素在一個原生的javascript建構函式Audio，可以在任何時候播放音訊。Audio和Image很像，但Audio不用像Image那樣必須插入到文件中，只要建立一個新例項，並傳入音訊原始檔即可

var audio = new Audio('test.mp3');    
<script>
var audio = new Audio('http://7xpdkf.com1.z0.glb.clouddn.com/honey.mp3');
audio.oncanplaythrough = function(){
    audio.controls = true;
    document.body.appendChild(audio);
}
// 為相容IOS
audio.load()
</script>

　　特別注意的是，IOS不能直接使用oncanplaythrough事件，需要新增audio.load()方法，否則該事件不生效

 

相關文章