1

有没有办法让jquery.mb.YTPlayer.js在使用InstantClick.js初始页面加载后工作？

该插件在初始页面加载时工作正常，但之后不再工作。

这是我最初初始化它的方式，在页面加载时工作正常，但在进一步导航后不能：

应用程序.js 

InstantClick.on('change', function() {
        $(".player").mb_YTPlayer();
});

然后我花了几个小时尝试调试，结果是这样的：

应用程序.js 

InstantClick.on('change', function() {
    if ($(".mbYTP_wrapper")[0]){
        $(".player").playerDestroy();
        console.log('destroyed');
    }
    if (window.YT) {
        console.log(window.YT);
    }

    $(".player").mb_YTPlayer();
});

在jquery.mb.YTPlayer.js我尝试将其添加到.playerDestroy： 

playerDestroy: function () {
        jQuery("#YTAPI").remove();
}

在初始页面上加载对象window.YT当然不存在，但是在第一页导航之后我得到 1 个对象，然后我得到 2 个对象进行 1 个导航，然后我得到 3 个对象等等。图片下面是 4 个页面导航、10 个window.YT对象之后。

在此处输入图像描述

4

1 回答 1

1

我检查了您使用的两个插件，并得出结论，问题在于您的代码在每次导航时都会重新加载。

要解决这个问题，请尝试data-no-instant对只需要加载一次的脚本使用属性。这可能包括以下内容：

Youtube 小部件：<script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflr-TgN1/www-widgetapi.js" async="" data-no-instant></script>

优酷 API：<script src="https://www.youtube.com/player_api?v=2.7.6" id="YTAPI" data-no-instant></script>

jQuery 库：<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js" data-no-instant></script>

YT 播放器插件：<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js" data-no-instant></script>

即时点击插件：<script src="instantclick.min.js" data-no-instant></script>

将以下代码放入内部：<script data-no-instant></script>

还要在 mouseup 和 touchend 事件上销毁您的 YT Player 实例。

$(body).on('mouseup touchend',".player",function(){
    $(".player").playerDestroy();
});

并在 InstantClick 事件上重新启动 YT 播放器change。

InstantClick.on('change',function(){
    $(".player").mb_YTPlayer();
});

如果你这样做，我认为问题应该得到解决。

于 2015-03-23T12:02:30.347 回答