javascript - 使用 JPlayer 制作 Web 小部件时出现问题

标签 javascript jquery jplayer

我正在尝试使用 JPlayer( http://jplayer.org ) 制作一个 Web 小部件，并按照此处所述的步骤进行操作: http://alexmarandon.com/articles/web_widget_jquery/

这是我的 widget.js 文件，将从外部网站调用该文件来加载 Web 小部件:

(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

当我在外部网站加载 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();
}

最佳答案

最终更新

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

此处的测试用例:http://portableideas.net/projects/stackoverflow/16357493/test.html (我没有上传 .swf，因此请使用支持 mp3 的浏览器进行测试，例如我测试的 Chrome 26)。

关于javascript - 使用 JPlayer 制作 Web 小部件时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16357493/

上一篇：javascript - Bootstrap 提前输入自动完成从相同的值返回多个

下一篇：javascript - 多次调用实习生异步回调

相关文章：

javascript - 当文本字段不为空时，Ajax 自动完成 jquery 不起作用

javascript - 如何在 Kendo Grid 中显示二维码？

javascript - 包含链接的中心响应 DIV

javascript - 使用 JS 更改特定类的链接 css 颜色

javascript - 如何检查选取框是否滚动

firefox - MVC3 中的 JPlayer 的 FireFox 不支持内容类型 HTTP application/octet-stream

javascript - 无法让 jPlayer 给我声音了

jquery - jPlayer 无法在 Firefox 中播放 mp3

javascript - 我对 javascript 中的 this 关键字感到困惑，我想知道我是否可以做我想要的事情？

javascript - 当用户调整由 CSS3 定义的可调整大小的文本输入时，是否可以捕获调整大小事件？

©2024 IT工具网  联系我们