javascript - 在 Youtube Click 上停止自定义 jQuery 幻灯片

Question

在 Youtube Click 上停止 jQuery 幻灯片放映
当我播放其中一个视频时，如何让我的视频幻灯片停止？

我有一个简单的 jQuery 幻灯片，它可以在 3 个视频列表中滑动:

jQuery(document).ready(function ($) {
    $('#videoSlides > div').hide();
    $('#videoSlides > div:first').show();
    var doTheSlide = function () {
        $('#videoSlides > div:first')
            .fadeOut(0)
            .next()
            .fadeIn(2000)
            .end()
            .appendTo('#videoSlides');
    };
    var delay = 5000;
    interval = setInterval(doTheSlide, delay);
});

然后，当单击其中一个视频时，幻灯片应该停止:

function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
    clearInterval(interval);
}
}

幻灯片效果很好，但是当我单击其中一个视频进行播放时，幻灯片并没有成功停止。它只是继续滑过。我该如何阻止这个？

完整代码在这里:http://jsfiddle.net/8b5r2fa9/4/

Answer 1

你有三个问题。一，你的事件没有触发。第二，弄乱间隔是棘手的，应尽可能避免。第三，当视频元素被移动并重新附加时，您将丢失事件附件。

准备好？我们走吧。

据此:YouTube API Change Event Not Firing API 可能有问题，因此使用 JS 加载视频是一个更好的选择。

(function setupPlayers() {
    if(window['YT'].loaded == 1){
        // Sets up the players via script due to the Iframe API being buggy
        var player01 = new YT.Player('player01', {
            height: '390',
            width: '640',
            videoId: 'nCgQDjiotG0',        
            events: {      
              'onStateChange': onPlayerStateChange
            }
        });
        var player02 = new YT.Player('player02', {
            height: '390',
            width: '640',
            videoId: 'V70ruRzEGOI',        
            events: {      
              'onStateChange': onPlayerStateChange
            }
        });
        var player03 = new YT.Player('player03', {
            height: '390',
            width: '640',
            videoId: 'xgrcK9Ozb_Q',        
            events: {      
              'onStateChange': onPlayerStateChange
            }
        });
    }
    else {
        setTimeout(setupPlayers, 100);
    }
})();

注意:要确保 API 已加载，您必须检查 window['YT'].loaded直到一切都在那里。

这是一个有点迂回的技术来完成你想要做的事情，但它比弄乱间隔本身要容易得多。 Javascript 超时和间隔充其量是棘手的。

我们在这里制作的是一个主循环(就像一个游戏，如果你曾经这样做过的话)并在该循环的 Action 上放置一个全局条件。这样，代码仅在您的条件为真时执行，但它只是继续运行该循环，您不必担心停止或重新启动它。我还将 setInterval 更改为在 doTheSlide 中重复调用的 setTimeout功能，这对我来说似乎更稳定，并且修复了我之前处理过的 chrome 中的一些问题。

在下一个片段中也是最后一个问题的修复。您不能使用 appendTo在元素上，因此您必须通过节点移动并检测列表的末尾。我使用了一些 jQuery 扩展方法，您可以在最终代码中看到。

var slideDelay = 5000;
var currentSlide = $('#videoSlides > div:first');

function doTheSlide() {
    if(window.slide === true){
        currentSlide.hide();
        if(currentSlide.next().exists()){
            currentSlide = currentSlide.next();
        }
        else {
            currentSlide = $('#videoSlides > div:first');
        }
        currentSlide.fadeIn(2000);
    }
    setTimeout(doTheSlide, slideDelay);
};

$(function() {
    //  Add a nifty helper
    $.fn.exists = function () {
        return this.length !== 0;
    };

    // Set up the slideshow (Runs once)
    var interval;
    window.slide = true;
    jQuery(document).ready(function ($) {
        $('#videoSlides > div').hide();
        $('#videoSlides > div:first').show();
        setTimeout(doTheSlide, slideDelay);
    });
});

这是最终的工作代码:fiddle

我还包含了在视频结束或暂停时重新启动 slider 的代码。