仅在Chrome中调试jPlayer初始化,在控制台中看不到网络或js错误

时间:2014-07-31 17:03:57

标签: javascript jquery google-chrome jplayer

这款流媒体MP3播放器已经运行了8个月。它在过去几周内出现了一种奇怪的行为,但仅在Chrome中 - 在网站上的任何地方首次点击任何“监听”链接都会产生预期的控制台输出并改变播放器区域中的HTML但流不会启动。在控制台中看不到网络404s,403s等。控制台中没有抛出任何JS错误,除了Flash回退投诉,尽管文件被找到,但它总是被抛出...

在IE,FF或Windows Safari中未观察到此问题。

直播网站:http://itsneworleans.com/

示例链接:

<a href="#top" ajax-data="/audio/episodes/2014_03_21_587_hello-swelo.mp3" ajax-data-id="587" ajax-data-alt="Happy Hour: Hello Swelo" class="playerLink ">Listen</a>

http://itsneworleans.com/js/main.js

的jPlayer初始行第233行
$("#jquery_jplayer_1").jPlayer({
        supplied: "mp3",
        swfPath: "http://itsneworleans.com/js/jQuery.jPlayer.2.5.0",
        solution: "html,flash",
        wmode:"transparent",
        errorAlerts: true,
        ended: function () {
            console.log('ended event fired');
            $.getScript('/js/random_show.js.php');
        }
    });

http://itsneworleans.com/js/main.js第245行点击功能:

$("body").on('click', '.playerLink', function() {
    if ($(this).attr('ajax-data')) {
        console.log("Playing " + $(this).attr('ajax-data'));

         ga('send', 'pageview', {'page': $(this).attr('ajax-data'),'title': document.title});
         console.log("Sending to GA " + $(this).attr('ajax-data'));

        $("#jquery_jplayer_1").jPlayer("setMedia", {
            mp3: $(this).attr('ajax-data')
        }).jPlayer("play");
        var chunks = $(this).attr('ajax-data-alt').split(':');
        var title = chunks[0] + ':<br>' + chunks[1];
        $('#playerTitle').html(title);
        $('#poplink').attr('ajax-data', $(this).attr('ajax-data-id'));

         var playtime = $("#jquery_jplayer_1").data("jPlayer").status.currentTime;
         $.ajax({
          type: "POST",
          url: "/inc/pcnter.php",
          data: {e:$(this).attr('ajax-data-id'), t:playtime, p:0}
        });

        if ($('#player').css('display') != 'block') {
            $('#player').css('display', 'block');
            $('#player').animate({"height":"80px"}, 1000);
        }
    }
});

输出:

Playing /audio/episodes/2014_03_21_587_hello-swelo.mp3 main.js:247
Sending to GA /audio/episodes/2014_03_21_587_hello-swelo.mp3 main.js:250
jPlayer 2.5.0 : id='jquery_jplayer_1' : Error!
jPlayer's Flash fallback is not configured correctly, or a command was issued before the jPlayer Ready event. Details: undefined is not a function
Check your swfPath option and that Jplayer.swf is there.
Context: http://itsneworleans.com/js/jQuery.jPlayer.2.5.0/Jplayer.swf 

1 个答案:

答案 0 :(得分:2)

我添加了一个带控制台输出的ready()函数。我发现它只在第二个Listen链接点击时触发。

根据该结果进行了一些搜索后,我找到了this post

  

&#34;检查你的风格。如果您的#jquery_jplayer_1或其父级有   display = none,ready事件永远不会在诸如opera或者的浏览器中触发   Firefox浏览器。我的意思是不能隐藏flash对象。&#34;

我无法解释为什么之前有效,但发生的事情是jPlayer的Flash解决方案无法加载,因为我的播放器显示设置为无。

所以现在我通过负边距顶部筛选了球员,而不是动画高度我动画margin-top。它现在都在工作。