JavaScript / JQuery Проблема с Slick Slider и видео на YouTube - PullRequest
1 голос
/ 29 апреля 2020

Привет! У меня возникла проблема с слайдером Slick и видео на YouTube, которые воспроизводятся автоматически при просмотре. Он работал, но теперь, когда вы перемещаетесь по ползунку, он перестает работать и застревает. Видео не будет воспроизводиться после того, как это произойдет.

Это код

var gridVideoList = new Array();
var gridPlayerList = new Array();
var timeout = false;

initialiseGridVideos();
resizeBackgroundVideos();

document.addEventListener('click', function(evt) {
    var navbar = document.getElementsByClassName('navbar-collapse');
    for(var i = 0; i < navbar.length; i++) {
        if(navbar[i].classList.contains('in') && !evt.target.closest('.navbar')) {
            // Convert to jQuery object
            var $navbar = jQuery(navbar[i]);
            $navbar.collapse('hide');
        }
    }
});

window.addEventListener('resize', function() {
    // clear the timeout
  clearTimeout(timeout);
  // start timing for event "completion"
  timeout = setTimeout(resizeBackgroundVideos, 250);
});

function resizeBackgroundVideos() {
    var backgroundVideos = document.getElementsByClassName('background-video');
    for(var i = 0; i < backgroundVideos.length; i++) {
        var video = backgroundVideos[i];
        var videoHeight = video.clientHeight;
        var videoIframe = video.getElementsByClassName('background-video__iframe')[0];
        var videoIframeWidth = (videoHeight / 56.25) * 100;
        var videoIframeHeight = videoHeight;
        videoIframe.style.width = videoIframeWidth + 'px';
        videoIframe.style.height = videoIframeHeight + 'px';
    }
}

function initialiseGridVideos() {
    var gridSlideshow = document.getElementsByClassName('grid-slideshow')[0];
    var grids = gridSlideshow ? gridSlideshow.getElementsByClassName('grid') : false;
    if(grids) {
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        for (var i = 0; i < grids.length; i++) {
            var video = grids[i].getElementsByClassName('grid-video')[0];
            if(video) {
                var playerID = video.getAttribute('id');
                var videoID = video.getAttribute('data-video-id');
                gridVideoList.push({ID: playerID, videoID: videoID});
            }
        }
    }
}

function onYouTubeIframeAPIReady() {
    if(typeof gridVideoList === 'undefined') {
       return; 
    }
    for(var i = 0; i < gridVideoList.length; i++) {
        var autoplayVideo = i === 0 ? 1 : 0;
        var player = enableVideoAPI(gridVideoList[i], autoplayVideo);
        gridPlayerList.push(player);
    }
}

function enableVideoAPI(player, autoplayVideo) {
    return new YT.Player(player.ID, {
        height: '390',
        width: '640',
        videoId: player.videoID,
        playerVars: {
            autoplay: autoplayVideo,
            rel: 0,
            loop: 1,
            controls: 0,
            iv_load_policy: 3,
            showinfo: 0,
            disablekb: 1,
            modestbranding: 1,
            mute: 1,
            playlist: player.videoID
        },
        host: 'https://www.youtube.com'
    });
}

function playGridVideo(evt) {
    var gridColumn = evt.target.closest('.grid-column--one__video');
    var video = gridColumn.getElementsByClassName('grid-video')[0];
    for (var i = 0; i < gridPlayerList.length; i++) {
        var playerID = gridPlayerList[i].a.id;
        if(playerID === video.getAttribute('id')) {
            gridPlayerList[i].playVideo();
            break;
        }
    }
}

function stopGridVideoOnSlideSchange() {
    for (var i = 0; i < gridPlayerList.length; i++) {
            gridPlayerList[i].stopVideo();
    }
}


function startNewGridVideoOnSlideChange() {

    var gridSlideshow = document.getElementsByClassName('grid-slideshow')[0];
    var currentSlide = gridSlideshow.getElementsByClassName('slick-active')[0];
    var currentVideo = currentSlide.getElementsByClassName('grid-video')[0];

    if(currentVideo) {
        for (var i = 0; i < gridPlayerList.length; i++) {
        var playerID = gridPlayerList[i].a.id;
            if(playerID === currentVideo.getAttribute('id')) {
                gridPlayerList[i].playVideo();
                break;
            }
        }
    } 

}
(function($) {

    $('.grid-slideshow').slick({
        adaptiveHeight: true,
        dots: true,
        dotsClass: 'grid-slideshow__dots',
        prevArrow: '<button class="button--circle button--white slick-arrow slick-prev grid-slideshow__prev"><span class="sr-only">Previous</span><i class="fas fa-chevron-left"></i></button>',
        nextArrow: '<button class="button--circle button--white slick-arrow slick-next grid-slideshow__next"><span class="sr-only">Next</span><i class="fas fa-chevron-right"></i></button>'
    });

    $('.testimonials-slideshow__slide-container').slick({
        adaptiveHeight: true,
        prevArrow: '<button class="button--circle slick-arrow slick-prev testimonials-slideshow__prev"><span class="sr-only">Previous</span><i class="fas fa-chevron-left"></i></button>',
        nextArrow: '<button class="button--circle slick-arrow slick-next testimonials-slideshow__next"><span class="sr-only">Next</span><i class="fas fa-chevron-right"></i></button>'
    });

    $('.logo-slideshow__list').slick({
        adaptiveHeight: true,
        slidesToShow: 5,
        slidesToScroll: 1,
        arrows: false,
        autoplay: true,
        responsive: [
            {
              breakpoint: 992,
              settings: {
                slidesToShow: 4
              }
            },
            {
              breakpoint: 768,
              settings: {
                slidesToShow: 3
              }
            }
          ]
    });

    $('.grid-slideshow').on('afterChange', function(slick, currentSlide, nextSlide) {
        stopGridVideoOnSlideSchange();
        startNewGridVideoOnSlideChange();
    });

})( jQuery );

Похоже, ошибки появляются из этой строки кода.

var playerID = gridPlayerList[i].a.id;

...