光滑轮播如何通过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.

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