Смена слайдера при окончании видео
< script type = "text/javascript" >
var slideWrapper = $(".main-slider"),
iframes = slideWrapper.find('.embed-player'),
lazyImages = slideWrapper.find('.slide-image'),
lazyCounter = 0;
// POST commands to YouTube or Vimeo API
function postMessageToPlayer(player, command) {
if (player == null || command == null) return;
player.contentWindow.postMessage(JSON.stringify(command), "*");
}
// When the slide is changing
function playPauseVideo(slick, control) {
var currentSlide, slideType, startTime, player, video;
currentSlide = slick.find(".slick-current");
slideType = currentSlide.attr("class").split(" ")[1];
player = currentSlide.find("iframe").get(0);
startTime = currentSlide.data("video-start");
if (slideType === "vimeo") {
switch (control) {
case "play":
if ((startTime != null && startTime > 0) && !currentSlide.hasClass('started')) {
currentSlide.addClass('started');
postMessageToPlayer(player, {
"method": "setCurrentTime",
"value": startTime
});
}
postMessageToPlayer(player, {
"method": "play",
"value": 0
});
break;
case "pause":
postMessageToPlayer(player, {
"method": "pause",
"value": 0
});
break;
}
} else if (slideType === "video") {
video = currentSlide.children("video").get(0);
if (video != null) {
if (control === "play") {
video.play();
} else {
video.pause();
}
}
}
}
// Resize player
function resizePlayer(iframes, ratio) {
if (!iframes[0]) return;
var win = $(".main-slider"),
width = win.width(),
playerWidth,
height = win.height(),
playerHeight,
ratio = ratio || 16 / 9;
iframes.each(function() {
var current = $(this);
if (width / ratio < height) {
playerWidth = Math.ceil(height * ratio);
current.width(playerWidth).height(height).css({
left: (width - playerWidth) / 2,
top: 0
});
} else {
playerHeight = Math.ceil(width / ratio);
current.width(width).height(playerHeight).css({
left: 0,
top: (height - playerHeight) / 2
});
}
});
}
// DOM Ready
$(function() {
// Initialize
slideWrapper.on("init", function(slick) {
slick = $(slick.currentTarget);
setTimeout(function() {
playPauseVideo(slick, "play");
}, 1000);
resizePlayer(iframes, 16 / 9);
});
slideWrapper.on("beforeChange", function(event, slick) {
slick = $(slick.$slider);
playPauseVideo(slick, "pause");
});
slideWrapper.on("afterChange", function(event, slick) {
slick = $(slick.$slider);
playPauseVideo(slick, "play");
});
slideWrapper.on("lazyLoaded", function(event, slick, image, imageSource) {
lazyCounter++;
if (lazyCounter === lazyImages.length) {
lazyImages.addClass('show');
// slideWrapper.slick("slickPlay");
}
});
//start the slider
slideWrapper.slick({
// fade:true,
autoplaySpeed: 4000,
lazyLoad: "progressive",
speed: 600,
arrows: false,
dots: true,
cssEase: "cubic-bezier(0.87, 0.03, 0.41, 0.9)"
});
});
// Resize event
$(window).on("resize.slickVideoPlayer", function() {
resizePlayer(iframes, 16 / 9);
}); <
/script>
<section class="main-slider">
<div class="item vimeo" data-video-start="4">
<video autoplay muted loop>
<source src="/assets/video.mp4" type="video/mp4">
</video>
</div>
<div class="item vimeo">
<video autoplay muted controls>
<source src="/assets/video-1.mp4" type="video/mp4">
</video>
</div>
</section>
Нужно сделать автопрокрутку когда заканчивается видео. Заранее большое спасибо за помощь.