HTML5 音频标签 / mediaelement.js 的加载指示器

Question

javascript/jQuery 有没有办法知道 标签的源文件是否已经/正在加载？

我正在使用 mediaelement.js，但是我会接受仅适用于常规 标记的答案。目前我正在伪造加载指示：（

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

spin() 是来自 的函数spin.js）。显然，该指示器在这种情况下毫无意义，但是当页面加载但音频需要大约 15 秒才能开始播放时，人们会感到困惑，所以我不得不实施这个临时解决方案。不过，我希望它能够实际指示文件是否仍在加载，因此在较慢的连接上，图标将保留，直到文件实际开始播放。

另外值得注意的是，我将元素设置为 autoplay （没关系，我保证！），因此当页面加载时，它会自动开始“播放”，即使尚未发生实际的音频。这使得很难使用 play 事件来停止旋转器，因为它会立即停止。因此，我要么必须在音频实际开始时停止旋转器，要么在音频实际准备好播放之前不播放（如果这是有意义的）。

我还注意到，在加载音频文件时，时间指示器显示“00:00”。加载后，它会更改为“00:00:00”。所以看起来，做我需要的事情的能力已经是内置的，我只需要知道如何使用它。

如果有区别，则该文件是实时流（通过 Icecast）。谢谢！

Answer 1

canplay 事件怎么样？

编辑
既然我得到了要点，我最好把砖头的解决方案贴给后人：

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

Answer 2

我已经通过以下方法解决了一半：

$("#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);
    }
});

谢谢！