動画をスライダーで自動スライドでさせている際、動画再生時のみ自動スライドを解除したい。

Question

質問失礼いたします。

只今、bxsliderを使用して、動画と画像を自動でスライドさせているのですが、
動画再生時のみ自動スライドを止め、再生が終われば自動スライドをスタートさせたいのですが、
やり方がわかりません。
ご教示頂けたら幸いです。
何卒よろしくお願いいたします。

■html

<div id="slider"> <div id="sliderCont"> <div class="slider01"><img src="images/slider01.jpg" alt=""/></div> <div class="slider02"> <p class="bg"><img src="images/slider_movie_bg.jpg" width="1400" height="705" alt=""/></p> <iframe width="560" height="315" src="https://www.youtube.com/embed/××××××?rel=0" frameborder="0" allowfullscreen></iframe> </div> <div class="slider03"> <p class="bg"><img src="images/slider_movie_bg.jpg" width="1400" height="705" alt=""/></p> <iframe width="560" height="315" src="https://www.youtube.com/embed/××××××?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> </div> <div id="bx-pager"> <a data-slide-index="0" href=""><img src="images/slider_pager_thum01.png" /></a> <a data-slide-index="1" href=""><img src="images/slider_pager_thum02.jpg" /></a> <a data-slide-index="2" href=""><img src="images/slider_pager_thum03.jpg" /></a> </div>

■JS
$(function() {
//Bxslider
$('#sliderCont').bxSlider({
auto: true,
speed: 500,
slideWidth: 1200,
slideMargin: 0,
mode: 'fade',
pager:true,
controls: true,
pause: 8000,
infiniteLoop: true,
minSlides: 1,
maxSlides: 1,
pagerCustom: '#bx-pager',
nextText: '',
prevText: ''
});
});

Answer 1

スライダーの自動切り替えのスタート・ストップは以下のメソッド。

http://bxslider.com/options

var slider = $('.bxslider').bxSlider();
slider.startAuto();	// スタート
slider.stopAuto();	// ストップ

問題は Youtube の動画の終了をどうやって捕捉するかですが、JavaScript でそれを捉えないといけませんので、Youtube API を利用しなければなりません。

検索すると、以下のような例がありましたので、動画の再生終了が捉えられるようです。再生終了時に、slider.startAuto(); すればOKかと。

http://phpjavascriptroom.com/example3.php?&f=include/strm/youtubeiframeplayerapi/status.inc

あと、再生の途中でスライダーのページネーションをクリックされたとき、再生のストップボタンを押下されたときに、slider.goToNextSlide(); を実行するように組んであげればよさそうです。