Привет! У меня возникла проблема с слайдером 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;