Я пытаюсь добавить 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 is не функция". После появления этой ошибки последующие вызовы работают нормально, пока элемент не будет скрыт и снова отображается.
Вот соответствующий код, и любая помощь будет принята с благодарностью.
<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);
}