jquery.mb.YTPlayer.js 使用 InstantClick.js 初始页面加载后无法正常工作

Question

有什么办法可以让jquery.mb.YTPlayer.js work after initial page load with InstantClick.js？

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

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

app.js

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

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

app.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 个对象。

Answer 1

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

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

Youtube widget: <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>

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

JQuery library: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js" data-no-instant></script>

YT Player plugin: <script type="text/javascript" src="inc/jquery.mb.YTPlayer.js" data-no-instant></script>

InstantClick plugin: <script src="instantclick.min.js" data-no-instant></script>

Put Following Codes Too inside: <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();
});

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

jquery.mb.YTPlayer.js 使用 InstantClick.js 初始页面加载后无法正常工作

jquery.mb.YTPlayer.js not working after initial page load with InstantClick.js

javascript

jquery

pjax

ytplayer