HTML 5 Audio/Video DOM canplaythrough 事件在移動端遇到的坑

標籤：

canplaythrough 事件定義和用法

當瀏覽器預計能夠在不停下來進行緩衝的情況下持續播放指定的音頻/視頻時，會發生 canplaythrough 事件。

當音頻/視頻處於載入過程中時，會依次發生以下事件：

• loadstart
• durationchange
• loadedmetadata
• loadeddata
• progress
• canplay
• canplaythrough

瀏覽器支援

所有主流瀏覽器都支援 canplaythrough 事件。

注釋：Internet Explorer 8 或更早的瀏覽器不支援該事件。

以上是w3cschool的解釋，但是在我實驗檢測中，發現chrome，firefox對此事件是支援的，而移動端對此事件支援需要輔助方法。

我們在做移動端h5的時候，可能都會需要預先載入資源，包含圖片，音視頻檔案

var audio = new Audio();audio.addEventListener("canplaythrough",function(){    console.log("載入完成！");},false);audio.addEventListener("error",function(){    console.log("載入失敗！");},false);audio.src = src;

看這段代碼好像每錯，在pc端檢測也沒有錯，但是當我們放到h5上面就會出錯，因為手機上面音樂是流媒體載入的，就是說在載入的過程中是可以播放的一邊載入一邊播放，canplaythrough 事件在移動端，只有允許audio/video檔案載入播放完之後才會執行。

var audio = new Audio();//canplaythrough這個事件在手機上流媒體要一邊播放才能監聽得到，pc端chrome可以完美支援audio.addEventListener("canplaythrough",function(){    //我們發現播放完之後這裡執行了    console.log("載入完成！");},false);audio.addEventListener("error",function(){    console.log("載入失敗！");},false);audio.src = src;audio.play();

但是這裡會導致載入的時候就播放聲音，那於是這樣幹

var audio = new Audio();//canplaythrough這個事件在手機上流媒體要一邊播放才能監聽得到，pc端chrome可以完美支援audio.addEventListener("canplaythrough",function(){    audio.pause();    audio.volume = 1;    //我們發現播放完之後這裡執行了    console.log("載入完成！");},false);audio.addEventListener("error",function(){    console.log("載入失敗！");},false);audio.src = src;audio.play();audio.volume = 0;

但是發現，效果不好，會出現停頓等現象。

 

於是最後想了一種方法，通過xmlHTTP來擷取音頻檔案：

function createXHR(){  try { return new XMLHttpRequest(); } catch (e) {}  try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}  try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}  return null;}  var xhr=createXHR();xhr.onreadystatechange=function(){    if(xhr.readyState == 4){        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){            callNext();        }else{            callNext();        }    }};scr = "song.mp3";//true（非同步）或 false（同步）xhr.open("post",src,false);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send()

但是發現這樣做還是不完美，發現音樂還是有延遲的現象;

歡迎大神拍磚，給出解決辦法

 

HTML 5 Audio/Video DOM canplaythrough 事件在移動端遇到的坑