I have a problem with jPplayer in IE8. I'm working on an application which should support IE8. It works in every other version >8 of IE and plays on chrome and firefox. I googled it with multiple keywords and changed it based on different scenario but I couldn't find any reason why it's not working. Still I can play the demo page in jplayer site with IE8. The other possibility was wrong swfpath which I tested it and change the "solution" to just flash and it plays in other version of IE. The error that i'm getting 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>
Here is my piece of 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 really appreciate every suggestion.
EDIT:After some digging I figured out that this is not because of jplayer and it's because of angularjs which is not fully compatible with IE8. So I added es5-shim.min.js to my path and it fixed the problem. Basically I added this peice of code to my program and now everything is working well. for more information you can check out 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]-->
After some digging I figured out that this is not because of jplayer and it's because of angularjs which is not fully compatible with IE8. So I added es5-shim.min.js to my path and it fixed the problem.