2011-06-05 64 views
0

我正在尝试将mediaelement.js添加到我的网站,以便为特定页面上的任何MP3链接呈现单个播放器。该设计对于IE 9和Chrome 11(其具有HTML5 MP3支持)工作正常,但是在Opera 11和FireFox 4上存在闪回问题。单击页面上的任何MP3链接使用.setSrc()媒体元素播放器更改播放器源的方法,但在Opera和FF中,第一次调用此方法时,将返回错误“this.media.setSrc不是函数”。任何对该功能的调用都可以正常工作。使用MediaElement.js在Opera和FireFox上使用MP3 Flash Fallback

另一个问题是包含播放器中的元件被隐藏后“显示:无”,然后再次显示,调用.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); 
} 
+0

更新:在线发现了关于flash对象和隐藏元素的几个讨论。通过在屏幕上和屏幕之间移动元素来修复第二个问题,而不是隐藏和显示,并坚持一个对象实例。然而,第一个错误“this.media.setSrc不是函数”在第一次调用该函数时仍然会触发,即使MP3已按预期加载和播放。 – Glen 2011-06-07 17:01:09

回答

0

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

相关问题