|
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" : 1 |
|
}); |
|
break; |
|
case "pause": |
|
postMessageToPlayer(player, { |
|
"method": "pause", |
|
"value": 1 |
|
}); |
|
break; |
|
} |
|
} else if (slideType === "youtube-sound") { |
|
switch (control) { |
|
case "play": |
|
postMessageToPlayer(player, { |
|
"event": "command", |
|
// "func": "mute" |
|
}); |
|
postMessageToPlayer(player, { |
|
"event": "command", |
|
"func": "playVideo" |
|
}); |
|
break; |
|
case "pause": |
|
postMessageToPlayer(player, { |
|
"event": "command", |
|
"func": "pauseVideo" |
|
}); |
|
break; |
|
} |
|
} else if (slideType === "youtube") { |
|
switch (control) { |
|
case "play": |
|
postMessageToPlayer(player, { |
|
"event": "command", |
|
"func": "mute" |
|
}); |
|
postMessageToPlayer(player, { |
|
"event": "command", |
|
"func": "playVideo" |
|
}); |
|
break; |
|
case "pause": |
|
postMessageToPlayer(player, { |
|
"event": "command", |
|
"func": "pauseVideo" |
|
}); |
|
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, |
|
autoplay: true, |
|
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); |
|
}); |
@tommydunn Thanks for this, great work. However, there are some things I want to do. First of all it works fine when you add the autoplay feature. There is no problem. I give it 4 seconds and all slides change automatically in 4 seconds. The point I want you to help with is this: When it comes to both Youtube and html5 video item, the autoplay feature will be disabled. When the video time is over, the autoplay feature will be activated again. How can I do that?