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

Debugging jPlayer Initialization in Chrome only, no network or js errors seen in console

本文关键字：网络 错误 js 控制台 调试 Chrome jPlayer 初始化 仅在      更新时间：2023-09-26

这个流媒体MP3播放器已经正常工作了8个月了。在过去的几周里，它已经发展出一种奇怪的行为，但只在Chrome中-在网站上任何地方的任何"听"链接的第一次点击产生预期的控制台输出和改变播放器区域的HTML，但流不开始。在控制台看不到网络404,403等。控制台没有抛出任何JS错误，除了Flash回退投诉，尽管文件在寻找的地方被找到，但总是抛出…

在IE、FF或Windows Safari中未发现此问题。

Live site: 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>

jPlayer init第233行http://itsneworleans.com/js/main.js

$("#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

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

根据这个结果进行了更多的搜索后，我发现了这篇文章:

"检查你的样式。如果您的#jquery_jplayer_1或它的父级具有Display =none, ready事件在opera或firefox。我是说闪光对象是无法隐藏的。"

我不能说为什么它以前工作过，但发生的事情是，jPlayer的Flash解决方案无法加载，因为我的播放器显示设置为none。

所以现在我通过一个负的margin-top偏移了玩家，而不是动画高度，而是动画margin-top。

相关文章：