开发者

MP3 Flash Fallback on Opera & FireFox using MediaElement.js

I'm trying to add mediaelement.js to my site to present a single player for any MP3 link on a particular page. The design is working fine for IE 9 and Chrome 11 (which have HTML5 MP3 support), but it has an issue with the flash fallback on Opera 11 and FireFox 4. Clicking any MP3 link on the page uses the .setSrc() method of media element player to change the source of the player, but in Opera and FF, the first time this method is called, it returns error "this.media.setSrc is not a function". Any call to the function after that works fine.

Another issue is after the element containing the player is hidden "display:none" and then displayed again, calling the .pause() f开发者_运维问答unction will produce error "this.pluginApi.pauseMedia is not a function". After that error is thrown, subsequent calls work fine until the element is hidden and displayed again.

Here's the relevant code, and any help would be very much appreciated.

<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);
}


You would need to add "flashmediaelement.swf" as well.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜