MediaElement.js 可以用于播放 IE6-8、Firefox 和 Opera 的音频吗？答案

【问题标题】：Can the MediaElement.js be used to play audio for IE6-8,Firefox and Opera?MediaElement.js 可以用于播放 IE6-8、Firefox 和 Opera 的音频吗？
【发布时间】：2014-07-02 07:43:23
【问题描述】：

MediaElement.js 能否用于播放 IE6-8、Firefox 和 Opera 的音频？如果是，我们如何为上述音频播放提供后备？

我使用的代码是

<div class="audio-player">
    <audio id="audio-player" src="sample.mp3" type="audio/mp3" controls="controls"></audio>
</div>

它在最新版本中运行良好，但我想测试上面提到的较低版本，您能否告诉我支持哪些浏览器以及我应该添加哪些代码才能使音频在较低版本上运行版本。

感谢并感谢您尽早回复。

【问题讨论】：

标签： javascript audio browser html5-audio mediaelement.js

【解决方案1】：

如果您只是在示例中播放 mp3 音频，则无需设置后备以在不同的浏览器中播放。这 3 个选项将适用于您当前在 Firefox、Opera、IE6+、Chrome（和大多数现代浏览器）中的 html 元素

1)。用 MEJS 初始化所有 audio 元素

$("audio").mediaelementplayer({
    // API options
});

JSFIDDLE

2)。初始化你自己的选择器

$("#audio-player").mediaelementplayer({
    // API options
});

JSFIDDLE

3)。显式创建一个 MediaElementPlayer 对象供自己使用

var player = new MediaElementPlayer('#audio-player', {
    // API options
});

JSFIDDLE

此外，您可以设置不同的 API 选项和/或在 success 设置中添加 event 侦听器，例如：

var player = new MediaElementPlayer('#audio-player', {
    // API options
    success: function (mediaElement, domObject) {
        // optionally call the play method
        mediaElement.play();
        // or set MEJS events
        // note : canplay event won't work if preload="none"
        mediaElement.addEventListener('playing', function () {
            // audio is playing, do something here
        }, false);
        mediaElement.addEventListener('pause', function () {
            // audio was paused, do something here
        }, false);
    }
});

JSFIDDLE

【讨论】：