HTML5音視頻播放(Video,Audio)和常見的坑處理

時間 2019-11-09

標籤 html5 html 音視頻播放 video audio 常見的處理欄目 HTML5 简体版

原文原文鏈接

1. 前言背景javascript

　　在HTML5出現以前，Web頁面訪問音視頻主要是經過Flash，Activex插件，還有微軟後來推出的silverlight來展示的，儘管FLASH曾經風靡全球，可是隨着互聯網的不斷髮展，進入移動時代之後，Flash的風頭漸漸被HTML5替代，主要緣由是Flash常常爆出漏洞，安全性使人擔心，性能方面較差，對網絡瀏覽和設備的電池也消耗比較大等等，Flash天生就是爲PC而生，沒法適應移動時代的特色，因此被各大廠商逐漸拋棄，連Adobe本身都已經放棄了Flash。因此HTML5是將來Web多媒體的主要方向。html

2. 音頻格式java

　　HTML5 Audio支持的格式有：wav，mp3和ogg格式，首先看看各大瀏覽器的支持狀況android

瀏覽器	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

　　先安利一下格式的定義：　　ios

Ogg：一種新的音頻壓縮格式，是徹底免費、開放和沒有專利限制的。chrome

MP3：是一種音頻壓縮技術。它被設計用來大幅度地下降音頻數據量。瀏覽器

WAV：爲微軟公司開發的一種聲音文件格式，聲音文件質量和CD相差無幾。安全

　　opera,chrome和firefox對三種模式都支持，而微軟和蘋果則對本身有專利利益的mp3格式情有獨鍾，而對潛在競爭者開源的ogg進行了封殺，ogg是一種爲了對抗mpeg(音頻上就是mp3)格式開發的一種音視頻技術，但他的關係比較微妙，由於目前沒有哪一個正式的公司敢直接使用ogg，由於商業推廣ogg存在專利訴訟風險，之因此目前尚未人訴訟ogg，是由於目前沒有大魚上鉤，不值得訴訟，可是反過來一旦訴訟失敗，ogg被證實沒有侵權mpeg，那之後mpeg就沒有人使用了。網絡

3. audio 標準APIdom

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種格式：

一、Ogg = 帶有Theora 視頻編碼和Vorbis 音頻編碼的 Ogg 文件；

二、MPEG4 = 帶有H.264 視頻編碼和AAC 音頻編碼的MPEG 4 文件；

三、WebM = 帶有VP8 視頻編碼和Vorbis 音頻編碼的WebM 文件。