My problem is:
- This fiddle is working for me.
- But when I copy-paste the same code (includeing correct paths to jquery, jplayer and Jplayer.swf) I am getting an error:
ActionScript Error #2060
SecurityError: Error #2060: Naruszenie obszaru izolowanego: element wywołujący ExternalInterface http://www.jplayer.org/latest/js/Jplayer.swf nie może uzyskać dostępu do null.
at flash.external::ExternalInterface$/_evalJS()
at flash.external::ExternalInterface$/call()
at Jplayer/init()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
Why would the same code work on a remote server (like jsfiddle) but a local file throws an error?
How can I run this code on my local machine?
This is how test.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Play a Shoutcast stream - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$("#jquery_jplayer_1").jPlayer({
swfPath: "Jplayer.swf",
ready: function () {
$(this).jPlayer("setMedia", { mp3: "http://94.23.108.1:8018/;stream/1" });
},
supplied: "mp3"
});
});//]]>
</script>
</head>
<body>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar">
</div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value">
</div>
</div>
<div class="jp-current-time">
</div>
<div class="jp-duration">
</div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
<div class="jp-title">
<ul>
<li>Testing</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</body>
</html>
After reading this post I found the solution was: