I am trying to make a web widget with JPlayer(http://jplayer.org) and followed the procedure stated here : http://alexmarandon.com/articles/web_widget_jquery/
Here is my widget.js file which will be called from external website to load the web widget:
(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
var script_tag1 = document.createElement('script');
script_tag1.setAttribute("type","text/javascript");
script_tag1.setAttribute("src",
"http://abcradiobd.fm/Scripts/jquery.jplayer.min.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
//load another jquery file
// Call our main function
main();
}
/******** Our main function ********/
function main() {
jQuery(document).ready(function($) {
/******* Load CSS *******/
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "http://abcradiobd.fm/style/jplayer.blue.monday.css"
});
css_link.appendTo('head');
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3:"http://live.abcradiobd.fm:8282/;stream/1"
}).jPlayer("play");
},
swfPath: "js",
solution: "flash, html",
supplied: "mp3",
wmode: "window"
});
$("#jquery_jplayer_1").bind($.jPlayer.event.play,function(event){$(".jp-status").html("<marquee behavior='scroll' direction='left' scrollamount='5'>abc radio fm 89.2</marquee>");
});
$("#jquery_jplayer_1").bind($.jPlayer.event.pause,function(event){$(".jp-status").text(" paused..");
});
var html_data = '<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-current-time"></div>'
+ '<div class="jp-status"></div>'
+ '</div>'
+ '<div class="jp-volume-bar">'
+ '<div class="jp-volume-bar-value"></div>'
+ '</div>'
+ '</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>';
/******* Load HTML *******/
//var jsonp_url = "http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?";
// $.getJSON(jsonp_url, function(data) {
$('#widget').html(html_data);
// });
});
}
})(); // We call our anonymous function immediately
When I am loading the js file in external website, I am getting this error using firebug:
TypeError: $(...).jPlayer is not a function
wmode: "window" widget.js (line 67)
Can anyone please help me find the issue here? Thanks in advance.
Updated code:
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.6.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",
"http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js");
var script_tag1 = document.createElement('script');
script_tag1.setAttribute("type","text/javascript");
script_tag1.setAttribute("src",
"http://abcradiobd.fm/Scripts/jquery.jplayer.min.js");
if (script_tag.readyState && script_tag1.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag1);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
Final Update
HTML
<div id="abc_widget"></div>
<script type="text/javascript" src="test.js"></script>
JS
(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if(window.jQuery===undefined||window.jQuery.fn.jquery!=='1.6.2') {
var jQueryTag=document.createElement('script');
jQueryTag.setAttribute("type","text/javascript");
jQueryTag.setAttribute("src",
"http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js");
if(jQueryTag.readyState) {
jQueryTag.onreadystatechange=function() { // For old versions of IE
if(this.readyState=='complete'||this.readyState=='loaded') {
addJplayer();
}
};
} else {
jQueryTag.onload=addJplayer;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0]||document.documentElement).appendChild(jQueryTag);
} else {
// The jQuery version on the window is the one we want to use
jQuery=window.jQuery;
addJplayer();
}
/******** adding jplayer function ********/
function addJplayer() {
var jPlayerTag=document.createElement('script');
jPlayerTag.setAttribute("type","text/javascript");
jPlayerTag.setAttribute("src",
"http://abcradiobd.fm/Scripts/jquery.jplayer.min.js");
if(jPlayerTag.readyState) {
jPlayerTag.onreadystatechange=function() { // For old versions of IE
if(this.readyState=='complete'||this.readyState=='loaded') {
widgetMain(); //call main now
}
};
} else {
jPlayerTag.onload=widgetMain; //call main now
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0]||document.documentElement).appendChild(jPlayerTag);
}
/******** Our main function ********/
function widgetMain() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery=window.jQuery.noConflict(true);
jQuery(document).ready(function($) {
/******* Load CSS *******/
var css_link=$("<link>",{
rel: "stylesheet",
type: "text/css",
href: "http://abcradiobd.fm/style/jplayer.blue.monday.css"
});
css_link.appendTo('head');
var html_data='<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-current-time"></div>'
+'<div class="jp-status"></div>'
+'</div>'
+'<div class="jp-volume-bar">'
+'<div class="jp-volume-bar-value"></div>'
+'</div>'
+'</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>';
/******* Load HTML *******/
$('#abc_widget').html(html_data);
var stream={
title: "ABC",
mp3: "http://live.abcradiobd.fm:8282/;stream/1"
};
var jPready=false;
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
jPready=true;
$(this).jPlayer("setMedia",stream).jPlayer("play");
},
pause: function() {
$(this).jPlayer("clearMedia");
},
error: function(event) {
if(jPready&&event.jPlayer.error.type===$.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia",stream).jPlayer("play");
}
},
swfPath: "js",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
$("#jquery_jplayer_1").bind($.jPlayer.event.play,function(event) {
$(".jp-status").html("<marquee behavior='scroll' direction='left' scrollamount='5'>abc radio fm 89.2</marquee>");
});
$("#jquery_jplayer_1").bind($.jPlayer.event.pause,function(event) {
$(".jp-status").text(" paused..");
});
});
}
})(); // We call our anonymous function immediately
Test case here: http://portableideas.net/projects/stackoverflow/16357493/test.html (I didn't uploaded the .swf so test with a browser with mp3 support, like Chrome 26, which is the one I tested).