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