ミギムキ

[ツール] bxSliderに入れたvideoタグをスライドに合わせて再生したい

スライダー参考画像

動作イメージ

サンプルコード

html

<ul class="video_slider"> <li> <video src="movie.mp4" poster="poster.jpg" autoplay muted loop playsinline></video> </li> <li> <video src="movie.mp4" poster="poster.jpg" muted loop playsinline></video> </li> <li> <video src="movie.mp4" poster="poster.jpg" muted loop playsinline></video> </li> </ul>
スポンサー広告
  • 一枚目のスライドに動画を配置する場合は「autoplay」属性をつけておきます

CSS

.bx-wrapper { margin: 0px auto; width: 900px; border: none; box-shadow: none; background-color: transparent; } .bx-wrapper video { width: 100%; height: 100%; }
  • 動画の制御とは直接関係ないですが、スライドを中央表示したり、枠線を消したりしています

jQuery

jQuery(function($) { $('.video_slider').bxSlider({ auto: true, pager: false, controls: false, infiniteLoop: true, onSlideBefore: function($slideElement, oldIndex, newIndex) { const videos = $slideElement.parent().find('video'); videos.each(function(index, element) { $(element).get(0).pause(); $(element).get(0).currentTime = 0; }); }, onSlideAfter: function($slideElement, oldIndex, newIndex) { const video = $slideElement.find('video'); if(video.length) { video.get(0).play(); } }, }); });
  • スライダーに各種パラメーターを設定して、初期化と動画の制御処理の設定を行います。詳細は後述

サンプルコードの解説

スライドする前に処理

onSlideBefore: function($slideElement, oldIndex, newIndex) { const videos = $slideElement.parent().find('video'); videos.each(function(index, element) { $(element).get(0).pause(); $(element).get(0).currentTime = 0; }); },
  • スライドする直前に呼ばれる処理です
  • bxSlider初期化時のパラメーター「onSlideBefore」に関数を設定することで、指定した処理が実行できます
  • 処理の中では、スライダーの中にあるすべての「video」タグに対して以下の処理を行っています
    • 「pause」関数で再生を停止
    • 「currentTime」に「0」を設定して再生位置を初期化
  • 「infiniteLoop」で無限ループを有効にしている場合、スライドの最初と最後に「bx-clone」というクラスがついたダミーのスライドが生成されます
  • このダミーに対しても処理を行わないと、最後のスライドから最初のスライドにループしたときに動画がガタついて表示されてしまいます
  • サンプルコードでは「bx-clone」かどうかなどの判定は省略して、スライダー内すべての動画に対して逐次処理を行っています
  • eachループで要素を取り扱う際は、「$()」で囲んでから各種メソッドを呼ぶようにします

スライドしたあとの処理

onSlideAfter: function($slideElement, oldIndex, newIndex) { const video = $slideElement.find('video'); if(video.length) { video.get(0).play(); } },
スポンサー広告
  • スライドした直後に呼ばれる処理です
  • bxSlider初期化時のパラメーター「onSlideAfter」に関数を設定することで、指定した処理が実行できます
  • 関数の引数として渡される「$slideElement」に、現在表示しているスライドが格納されています
  • そこから「video」タグを取り出し、「video」タグが存在しているなら「play」関数で再生を始めます
スポンサー広告