Opera 和 MP3 Flash 后备使用 MediaElement.js 的 FireFox

Question

我正在尝试将 mediaelement.js 添加到我的网站，以便为特定页面上的任何 MP3 链接提供单个播放器。该设计在 IE 9 和 Chrome 11（支持 HTML5 MP3）上运行良好，但在 Opera 11 和 FireFox 4 上存在 Flash 回退问题。单击页面上的任何 MP3 链接都会使用 .setSrc( ) 媒体元素播放器的方法来更改播放器的来源，但在 Opera 和 FF 中，第一次调用此方法时，会返回错误“this.media.setSrc is not a功能”。此后对该函数的任何调用都可以正常工作。

另一个问题是包含播放器的元素被隐藏“display:none”然后再次显示后，调用 .pause() 函数会产生错误“this.pluginApi.pauseMedia is not a功能”。抛出该错误后，后续调用可以正常工作，直到该元素被隐藏并再次显示。

这是相关代码，非常感谢任何帮助。

<script type="text/javascript" src="../js/mejs/mediaelement-and-player.min.js"></script>
<script type="text/javascript" src="../js/media.js"></script>
<div id="mediaPlayerFooter" class="mediaPlayerWrapper">
    <div id="mediaPlayer">
        <audio id="mp3Player" src="mp3/null.mp3" autoplay="autoplay" type="audio/mp3"></audio>  
    </div>
    <div id="closeButtonWrapper"><p><a id="closeButton" href="#close">Close</a></p></div>
</div>

$(function() {
    // Show the footer, load the MP3 file, and play.
    $("a[href*='.mp3']").click(function(e) {
        e.preventDefault();
        PlayMP3($(this).prop('href'));
    }); 

    // Stop the MP3 playback and close the footer.
    $('#closeButton').click(function(e) {
        e.preventDefault();
        ClosePlayer();
    });
});
function CreatePlayer() {
    var player = new MediaElementPlayer('#mp3Player',{
        audioWidth: 250, 
        startVolume: 1.0
    });
    return player;
}
function PlayMP3(sourceUrl){
    $('#mediaPlayerFooter').slideDown(750);
    var player = CreatePlayer();
    try {
        player.pause();
        player.setSrc(sourceUrl);
        player.load();
        player.play();
    }
    catch(err)
    {
        txt="There was an error loading the MP3.  ";
        txt+="Error message: " + err.message;
        console.log(txt);
    }
}
function ClosePlayer(){
    var player = CreatePlayer();
    player.pause();
    $('#mediaPlayerFooter').slideUp(750);
}

Answer 1

您还需要添加“flashmediaelement.swf”。