JS 【slick.js】とYouTube

2020-07-02

前回の投稿で、slick.jsの基本的な使い方を記載しましたが、今回は、スライドショーの中にYouTubeの動画が入っている場合についてです。
スライドショーの部分にYouTubeを入れた場合、そのままでもいいですが、表示されたタイミングで、動画再生させる方法もあるので、それについてまとめます。

<div class="slide">
	<div>Contents</div>
	<div> /* YouTube動画 */ </div>
	<div>Contents</div>
	<div>Contents</div>
</div>

<div>Contents</div>

<div> /* YouTube動画 */ </div>

<div>Contents</div>

</div>

このようにスライドショーの間にYouTube動画があるとします。

Contents
２つ目にYouTube動画

Contents

このスライドでは、長い動画でやっているので、切り替わった時に一時停止、また表示する時に再生という形になっているので、違和感がありますが、動画を30秒前後の動画にして、切り替わるタイミングをきちんと設定すれば、動画が表示されるたびに、始めからスタートとすることができます。
また、iframeのパラメータで、 enablejsapi=1 を付与していないと、この動作はされませんので、ご注意ください。

var $slider = $('.slide');

$slider.slick({
	autoplay: true,
	autoplaySpeed: 4000,
	arrows: false,
	dots: true,
	fade: true,
	pauseOnHover: false,
	pauseOnFocus: false,
	speed: 1000,
	zIndex: 100
});
sliderMovie();

function sliderMovie() {
	if($slider.find('iframe').get(0) && $(window).width() > 768) {
		var $movie = $slider.find('iframe');

		var slick;
		$slider.on("init", function(slick){
			slick = $(slick.currentTarget);
			setTimeout(function(){
				playPauseVideo(slick, "play");
			}, 1000);
		});

		$slider.on("beforeChange", function(event, slick) {
			slick = $(slick.$slider);
			playPauseVideo(slick,"pause");
		});
		$slider.on("afterChange", function(event, slick, currentSlide) {
			slick = $(slick.$slider);
			playPauseVideo(slick,"play");
			switch (currentSlide){
				case 1:
					$(this).slick("slickSetOption", "autoplaySpeed", 30000);
				break;
			}
		});
	}
}

function playPauseVideo(slick, control){
	var currentSlide, player;
	currentSlide = slick.find(".slick-current");
	player = currentSlide.find("iframe").get(0);
	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"
		});
	}
}

function postMessageToPlayer(player, command){
	if (player == null || command == null) return;
	player.contentWindow.postMessage(JSON.stringify(command), "*");
}

var $slider = $('.slide');

$slider.slick({

autoplay: true,

autoplaySpeed: 4000,

arrows: false,

dots: true,

fade: true,

pauseOnHover: false,

pauseOnFocus: false,

speed: 1000,

zIndex: 100

});

sliderMovie();

function sliderMovie() {

if($slider.find('iframe').get(0) && $(window).width() > 768) {

var $movie = $slider.find('iframe');

var slick;

$slider.on("init", function(slick){

slick = $(slick.currentTarget);

setTimeout(function(){

playPauseVideo(slick, "play");

}, 1000);

});

$slider.on("beforeChange", function(event, slick) {

slick = $(slick.$slider);

playPauseVideo(slick,"pause");

});

$slider.on("afterChange", function(event, slick, currentSlide) {

slick = $(slick.$slider);

playPauseVideo(slick,"play");

switch (currentSlide){

case 1:

$(this).slick("slickSetOption", "autoplaySpeed", 30000);

break;

}

});

}

function playPauseVideo(slick, control){

var currentSlide, player;

currentSlide = slick.find(".slick-current");

player = currentSlide.find("iframe").get(0);

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"

});

}

function postMessageToPlayer(player, command){

if (player == null || command == null) return;

player.contentWindow.postMessage(JSON.stringify(command), "*");

}

こちらのサイトを参考にさせていただきました。
参考サイト