Slick-carousel 如何在通过 youtube api 打开视频时停止自动播放 [英] Slick-carousel how to stop autoplay when video is on via youtube api

问题描述

我无法获得光滑的轮播(http://kenwheeler.github.io/slick/) 当我在滑块内使用 YouTube 剪辑时停止自动播放..

Hi i'm having trouble to get slick carousel (http://kenwheeler.github.io/slick/) to stop the autoplay when I'm using a youtube clip inside the slider..

有人说我可以使用 onAfterChange 但仍然不知道如何在视频打开时关闭自动播放(请注意这是鼠标不在视频上时)

Someone said that I can use onAfterChange but still dont know how to turn off the autoplay when video is on (mind that this is when mouse in NOT on the video)

这是我正在使用的代码，任何帮助都会很好:)

Here is the code I'm using any help would be nice :)

$("#slider").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: true,
    autoplay: true,
    autoplaySpeed: 7000,
    infinite: true
});

/* **************************************** *
 * Youtube API
 * Create player
 * **************************************** */
var player;
window.onYouTubePlayerAPIReady = function() {

    $("#player").hide();
    var player_id   = 'player';
    var $player     = jQuery('#'+player_id);
    var parent      = $player.parent();

    player = new YT.Player(player_id, {
        videoId: 'HevnOuJY1TM',
        height: parent.height(),
        width: '100%',
        playerVars: {
            'autoplay': 0,
            'controls': 0,
            'rel' : 0,
            'disablekb' : 0,
            'modestbranding' : 1,
            'showinfo': 0,
            'html5': 1
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }


    });

    var sizeVideo = _.debounce(function() {

        player.setSize('100%', parent.height());

    }, 500);

    jQuery(window).on('load resize', sizeVideo);

    jQuery(window).trigger('resize');
};

function onPlayerReady() {
    $("#slide-video").on("click", function() {
        $(this).css('background','transparent');
        $("#player").show();
        player.playVideo();
    });
}

function onPlayerStateChange(event) {

    if(event.data === 0) {
        $(".countdown").fadeIn();
    }

    if(event.data === 1) {
        $(".countdown").fadeOut();
    }

    if(event.data === 2) {
        $(".countdown").fadeIn();
    }

    if( 1 === event || 2 === event || 3 === event) {
        $('#slider')
            .slick('slickPause')
            .slick('slickSetOption', 'autoplay', false, true);
    } else {
        $('#slider').slick('slickPlay')
            .slick('slickSetOption', 'autoplay', true, true);
    }
}

});

推荐答案

我找到了解决问题的方法:

I found a solution to my problem:

function onPlayerReady() {
        $("#slide-video").on("click", function() {
            $(this).hover(function(){
                slider.slick('slickPause');
            });
            $(this).css('background','transparent');
            $("#player").show();
            player.playVideo();
        });
    }

    function onPlayerStateChange(event) {
        if(event.data === 0 || event.data === 2) {
            $(".countdown").fadeIn();
        }

        if(event.data === 1) {
            $(".countdown").fadeOut();
        }

        if( 1 === event.data || 2 === event.data || 3 === event.data) {
            slider.slick('slickPause');

        } else {
            slider.slick('slickPlay');
        }
    }

这对我的 chrome & 有效Safari .. Firefox 无法在 IE 上运行，我无法尝试，因为我不是在 PC 上而是在 MAC 上，但这就是为什么我设置了悬停功能以防有人想在那里使用鼠标?

This worked on my end in chrome & Safari.. Firefox doesnt work on and IE I cant try since im not on a pc but on a MAC, but thats why i putted a hover function incase someone want to have the mouse there?

更新:好的，它现在适用于所有..它只是在你暂停视频之后然后在滑块消失后恢复它，一旦它不再使用 slickPause 功能.

update: Okay it works now with all.. its just after you pause the video and then resume it AFTER the slider has gone once it will not use the slickPause function anymore.

这篇关于Slick-carousel 如何在通过 youtube api 打开视频时停止自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！