Question

在Youtube上停止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超时和间隔充其量是棘手的。

我们在这里制作的是一个主要的循环（就像游戏一样，如果你曾经这样做过），并在该循环的动作上设置全局条件。这样代码只在条件为真时执行，但它只是继续运行该循环而你不必担心停止或启动它。我还将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

我还提供了在视频结束或暂停时重启滑块的代码。

在Youtube上停止自定义jQuery幻灯片点击

1 个答案: