Question

我正在尝试将mediaelement.js添加到我的网站，以便为特定页面上的任何MP3链接提供单个播放器。该设计适用于IE 9和Chrome 11（支持HTML5 MP3），但它在Opera 11和FireFox 4上的闪回后备问题。点击页面上的任何MP3链接都使用 .setSrc（）媒体元素播放器的方法来改变播放器的来源，但是在Opera和FF中，第一次调用这个方法时，它返回错误“ this.media.setSrc不是函数”。在此之后对函数的任何调用都可以正常工作。

另一个问题是在包含播放器的元素隐藏“display：none”然后再次显示之后，调用 .pause（）函数将产生错误“ this.pluginApi.pauseMedia不是一个功能“。抛出该错误后，后续调用将正常工作，直到该元素被隐藏并再次显示。

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

<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”。

Opera Flash的MP3闪回FireFox使用MediaElement.js

1 个答案: