JPlayer( http://jplayer.org )でWebウィジェットを作成しようとしており、ここに記載されている手順に従いました: http://alexmarandon.com/articles/web_widget_jquery/
これは、Web ウィジェットをロードするために外部 Web サイトから呼び出される私の widget.js ファイルです。
(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
外部 Web サイトで js ファイルを読み込んでいるときに、firebug を使用して次のエラーが発生します。
TypeError: $(...).jPlayer is not a function
wmode: "window" widget.js (line 67)
ここで問題を見つけるのを手伝ってくれる人はいますか? 前もって感謝します。
更新されたコード:
// 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();
}