1. 前言背景
在HTML5出現之前，Web頁面訪問音視頻主要是通過Flash，Activex插件，還有微軟後來推出的silverlight來展現的，儘管FLASH曾經風靡全球，但是隨着互聯網的不斷髮展，進入移動時代以後，Flash的風頭漸漸被HTML5替代，主要原因是Flash經常爆出漏洞，安全性令人擔憂，性能方面較差，對網絡瀏覽和設備的電池也消耗比較大等等，Flash天生就是爲PC而生，無法適應移動時代的特點，所以被各大廠商逐漸拋棄，連Adobe自己都已經放棄了Flash。所以HTML5是未來Web多媒體的主要方向。
2. 音頻格式
HTML5 Audio支持的格式有：wav，mp3和ogg格式，首先看看各大瀏覽器的支持情況
| 瀏覽器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | YES | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | YES | YES | YES |
先安利一下格式的定義：
Ogg：一種新的音頻壓縮格式，是完全免費、開放和沒有專利限制的。
MP3：是一種音頻壓縮技術。它被設計用來大幅度地降低音頻數據量。
WAV：爲微軟公司開發的一種聲音文件格式，聲音文件質量和CD相差無幾。
opera,chrome和firefox對三種模式都支持，而微軟和蘋果則對自己有專利利益的mp3格式情有獨鍾，而對潛在競爭者開源的ogg進行了封殺，ogg是一種爲了對抗mpeg(音頻上就是mp3)格式開發的一種音視頻技術，但他的關係比較微妙，因爲目前沒有哪個正式的公司敢直接使用ogg，因爲商業推廣ogg存在專利訴訟風險，之所以目前還沒有人訴訟ogg，是因爲目前沒有大魚上鉤，不值得訴訟，但是反過來一旦訴訟失敗，ogg被證明沒有侵權mpeg，那以後mpeg就沒有人使用了。
3. audio 標準API
src: 要播放的音頻的 URL。preload: 是否預加載，如果使用 "autoplay"，則忽略該屬性。autoplay: 是否自動播放。loop: 是否循環播放。controls: 是否顯示瀏覽器自帶的控制條，例如播放按鈕。
<audio controls>
<source src="test.ogg" type="audio/ogg">
<source src="test.mp3" type="audio/mpeg">
<source src="test.wav" type="audio/wav">
您的瀏覽器不支持音頻播放
</audio>
//js獲取Dom對象
var audio_test = new Audio("test.mp3");
var audio_test = document.getElementById("audio_test");
DOM對象方法:
canPlayType(type);能否播放某個資源文件，返回三個字符串之一：empty、maybe 或 probably
load();重新加載資源
pay();播放
pause();暫停
DOM對象屬性，因爲比較多這裏只展示了幾個重要屬性：
- Media.currentSrc; //返回當前資源的URL
- Media.src = value; //返回或設置當前資源的URL
- Media.currentTime = value; //當前播放的位置，賦值可改變位置
- Media.volume = value; //音量
- Media.muted = value; //靜音
3. audio實際上的坑
Audio標籤API其實非常簡單，但只有PC瀏覽器支持的比較好，移動端卻因爲流量問題存在各種坑。
（1）自動播放
ios Safari會忽視autoplay屬性，原因據官方說明是因爲流量問題，Safari認爲不讓用戶確認就下載音頻文件會引起流量問題，所以禁止了這個功能，除了ios,高版本的安卓(5.0)部分機器也存在這個問題，爲了繞開這個功能必須要做一些處理：
解決辦法就是在頁面上新增一個按鈕，當用戶點擊按鈕時播放音樂
$('#myBtn').on('touchstart',function(){
var audio = $('#audio')[0];
audio.load();
audio.pause();
audio.play();
})
（2）單例問題:估計也是因爲流量問題，iOS Safari的音頻對象是單例的，也就是說你無法播放多個音頻文件，當你load多個音頻時，後一個會覆蓋前一個，有一個解決思路，就是把兩個音頻文件合併成一個文件，加載後通過設置聲音的位置來播放不同的音樂，類似於CSS中的雪碧圖原理。
var audio= $('#audio')[0],
audioConfig= {
sound1: {//第一個聲音
start: 0,
length: 1
},
sound2: {//第二個聲音
start: 1.5,
length: 2
}
}
//播放聲音1
audio.currentTime = audioConfig.sound1.start;
audio.play();
var stopFunc= function() {
if (this.currentTime >= audioConfig.sound1.start + audioConfig.sound1.length) {
this.pause()
}
}
audio.addEventListener('timeupdate', stopFunc, false);
//播放聲音2
audio.currentTime = audioConfig.sound2.start;
audio.play();
var stopFunc2 = function() {
if (this.currentTime >= audioConfig.sound2.start + audioConfig.sound2.length) {
this.pause()
}
}
audio.addEventListener('timeupdate', stopFunc2, false);
（3）循環播放
部分機型（ios）循環播放失效，解決方法，監聽播放完成事件，手動觸發播放
<!doctype html>
<html>
<head>
<title>Looping Audio</title>
<script type="text/javascript">
function init() {
var myAudio = document.getElementById("audio");
myAudio.addEventListener('ended', loopAudio, false);
}
function loopAudio() {
var myAudio = document.getElementById("audio");
myAudio.play();
}
</script>
</head>
<body onload="init();">
<audio id="audio" src="myAudio.m4a" controls></audio>
</body>
</html>
5. 視頻格式
視頻格式也有對應的3種格式：
1、Ogg = 帶有Theora 視頻編碼和Vorbis 音頻編碼的 Ogg 文件；
2、MPEG4 = 帶有H.264 視頻編碼和AAC 音頻編碼的MPEG 4 文件；
3、WebM = 帶有VP8 視頻編碼和Vorbis 音頻編碼的WebM 文件。
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
6. video標準API
src ：視頻的屬性
poster：視頻封面，沒有播放時顯示的圖片
preload：預加載
autoplay：自動播放
loop：循環播放
controls：瀏覽器自帶的控制條
width：視頻寬度
height：視頻高度
Media.canPlayType(type); //是否能播放某種格式的資源
Media.load(); //重新加載src指定的資源
Media.play(); //播放
Media.pause(); //暫停
7. video中的坑
（1）自動播放，類似於audio標籤，video也需要進行類似的操作
（2）多視頻播放，同樣也是要採用銜接，設置currenttime的方法來實現，還有一種方法是設置dom的src屬性，再第一個視頻播放完畢時，設置src屬性再進行play也是可以播放多個視頻的，但是缺點是，新的視頻需要加載，緩衝時間。
（3）循環播放類似於Audio標籤也是通過事件來處理
（4）預加載，preload屬性ios下是不支持的，android下也不能檢測是否加載成功，所以通用的做法是對視頻進行play方法然後立刻暫停
轉載自：https://www.cnblogs.com/zhusheng2008/p/5529439.html