HTML5音頻標籤加載指示器音頻標籤/ mediaelement.js

有沒有方法讓javascript/jQuery知道<audio>標籤的源文件是否已被加載？HTML5音頻標籤加載指示器音頻標籤/ mediaelement.js

我正在使用mediaelement.js，但是我會接受適用於標準<audio>標籤的答案。目前，我假裝負載指示：

$("#temp-loading").spin(minySpinner); 
setTimeout(function() { 
    $('#temp-loading').spin(false); 
}, 12000);

（spin()是spin.js函數）。顯然這個指標在這種情況下毫無意義，但是當頁面被加載時人們感到困惑，但音頻開始播放需要大約15秒鐘，所以我不得不實施這個臨時解決方案。但是，我希望它實際上指示文件是否仍在加載，所以在較慢的連接中，圖標將保留，直到文件實際開始播放。

另外值得注意的是，我的元素設置爲autoplay（沒關係，我保證！），所以當頁面加載時，它會自動開始「播放」，即使沒有實際的音頻發生。這使得難以使用play事件來停止微調，因爲它只是立即停止。所以我要麼在音頻實際開始時停止微調，要麼不播放，直到音頻實際上準備好播放，如果這是有意義的。

我還注意到，當音頻文件加載時，時間指示器顯示「00:00」。當它被加載時，它變成「00:00:00」。所以看起來我所需要的功能已經內置，我只需要知道如何使用它。

如果它有所不同，該文件是一個實時流（通過Icecast）。謝謝！

來源

2011-10-15 bricker

canplay事件呢？

編輯因爲我得到了點，我最好粘貼磚的留給後人解決方案：

$("audio").mediaelementplayer({ 
    audioWidth: 150, 
    features: ['playpause','current','volume'], 
    success: function(element) { 
     element.addEventListener('loadeddata', function(){ 
      $("#temp-loading").spin(false); 
     }, false); 
    } 
});

來源

2011-10-15 14:11:29 Tetaxa

與loadeddata具有相同的結果。適用於Webkit，但不適用於Firefox。 – bricker

我中途有解決它的下面：

$("#temp-loading").spin(minnerSpinner); 
var audio = document.getElementsByTagName('audio')[0]; 
audio.addEventListener('loadeddata', function(){ 
    $("#temp-loading").spin(false); 
});

但這不是一個跨瀏覽器的解決方案（適用於Chrome和Safari，不適用於Firefox）。

編輯我現在使用jQuery，但仍然不適用於Firefox（使用mediaelement的Flash後備）。在這一點上，它不再是一個html5問題，這是一個mediaelement問題。

$('audio').bind('loadeddata', function(){ 
    $("#temp-loading").spin(false); 
});

編輯2我最終得到它的工作如下Tetaxa的建議......他/她建議不完全是，但它給了我的想法，使用success回調：

$("audio").mediaelementplayer({ 
    audioWidth: 150, 
    features: ['playpause','current','volume'], 
    success: function(element) { 
     element.addEventListener('loadeddata', function(){ 
      $("#temp-loading").spin(false); 
     }, false); 
    } 
});

謝謝！

來源

2011-10-15 14:26:07 bricker

您是否嘗試過'audio.addEventListener（'MozAudioAvailable'，audioAvailableFunction，false）;'在Firefox中？ – Tetaxa

@Tetaxa是的，但它不會改變任何東西。紡紗工繼續旋轉。 – bricker

你可以使用'new MediaElement（opts）'構造函數將'loadeddata'事件綁定到mediaelement而不是audio element嗎？ – Tetaxa

HTML5音頻標籤加載指示器音頻標籤/ mediaelement.js

回答

相關問題