I'm facing an issue with jPplayer specifically in IE8. I'm currently developing an application that needs to be compatible with IE8. Interestingly, the player works perfectly fine on all other versions above 8 of Internet Explorer, as well as on Chrome and Firefox. Despite my efforts to troubleshoot by searching online using various keywords and implementing different solutions based on various scenarios, I haven't been able to pinpoint the exact reason for the malfunction in IE8. Strangely, the demo page on the jplayer website plays smoothly on IE8. Initially, I suspected the problem could be due to an incorrect swfpath. However, upon testing this theory and changing the "solution" to just Flash, the player worked seamlessly on other IE versions. The specific error message encountered is:
TypeError: Object doesn't support this property or method<div id=player1 class=ng-isolate-scope data-audio-src="generateLink(answer.literalValue)" im-audio-player>
Below is a snippet of the code related to jplayer:
var idSelector = '#'+scope.id;
var player = $(idSelector+" .jp-jplayer");
player.jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"//scope.audioSrc
});
},
swfPath:"angular/experience-detail/audio-player/jplayer/",
supplied: "mp3, ogv",
errorAlerts:"true",
cssSelectorAncestor: "",
solution:"html,flash",
duration: true,
toggleDuration: true,
cssSelector: {
title: idSelector+" .title",
stop: idSelector +" .stop",
mute: idSelector +" .mute",
unmute: idSelector +" .unmute",
currentTime: idSelector +" .currentTime",
duration: idSelector +" .duration"
},
size: {
width: "0px",
height: "0px"
}
});
$(idSelector+" .play").click(function(){
if(player.data().jPlayer.status.paused){
player.jPlayer("play");
$(idSelector+' .active-border').addClass("playing");
$(idSelector+" .audio-player-container").css({"border-color":"#c4ebff"});
}else{
player.jPlayer("pause");
}
});
I welcome any suggestions or insights on how to resolve this issue.
UPDATE: Further investigation led me to discover that the root cause was not actually the jplayer but rather an incompatibility issue between AngularJS and IE8. To address this, I included es5-shim.min.js in my project's path which successfully resolved the problem. By integrating the following code snippet into my program, everything now runs smoothly. For additional details, you can visit their GitHub page.
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.min.js"></script>
<script src="bower_components/es5-shim/es5-shim.min.js"></script>
<![endif]-->