web-dev-qa-db-ja.com

Slick.jsおよびhtml5ビデオの自動再生とビデオの一時停止

Html5セルフホスト動画でslick.jsを使用して、ユーザーの操作なしで動画を再生および一時停止することはできますか？

私は現在、垂直の滑らかなスライドショーと大きな画像とビデオが表示されて自動的にスクロールするメインセクションを持つデュアルスライダーを持つ次のコードを持っています。これはテレビでホストされるため、ユーザーの操作はありません。

WelcomeTV画面サイト

ビデオが含まれているスライドが表示された後、スライドが完全に再生されるようにするには、スライドショーを継続して無制限に繰り返します。ビデオにはさまざまな長さが含まれている可能性があるため、動的に長さを検出する必要があります。

この質問 にコードを実装してみましたが、サンプルを機能させることができませんでした。

    <div id="slideBox">
    <!--Sidebar-->
    <div class="sliderSidebar">
        <div><img src="http://placehold.it/200x100"></div>
        <div><img src="http://placehold.it/200x100"></div>
        <div><img src="http://placehold.it/200x100"></div>
        <div><img src="http://placehold.it/200x100"></div>
        <div><img src="http://placehold.it/200x100"></div>
        <div><img src="http://placehold.it/200x100/C8102E/FFFFFFF?text=Video" /></div>
    </div>  

    <div id="main-image" class="sliderMain">
        <div><img src="http://placehold.it/900x500"></div>
        <div><img src="http://placehold.it/900x500"></div>
        <div><img src="http://placehold.it/900x500"></div>
        <div><img src="http://placehold.it/900x500"></div>
        <div><img src="http://placehold.it/900x500"></div>
        <div id="slide-video">
            <video autoplay loop width="900px">
                <source src="video/SampleVideo.mp4" />
            </video>
        </div>
    </div>

    <script type="text/javascript">

    $(document).ready(function(){
        $('.sliderMain').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            asNavFor: '.sliderSidebar',
            autoplay: true,
            autoplaySpeed: 3000,
            onAfterChange : function() {
                player.stopVideo();
            }
        });
        $('.sliderSidebar').slick({
            slidesToShow: 5,
            slidesToScroll: 1,
            asNavFor: '.sliderMain',
            dots: false,
            centerMode: false,
            focusOnSelect: true,
            vertical: true,
            arrows: false
        });
        var video = $('.sliderMain .slick-active').find('video').get(0).play();

        $('.sliderMain').on('afterChange', function(event, slick, currentSlide, nextSlide){
        $('.sliderMain .slick-slide').find('video').get(0).pause();
        var video = $('.sliderMain .slick-active').find('video').get(0).play();
        });
    });
</script>

デモ

html5-videoslick.js
11
Matthew Johnson

はい、JavaScriptを使用して実行できます。
ビデオスライドがcurrentSlideになったら、次のことを行う必要があります。

  1. スライダーを一時停止
  2. ビデオを再生する

これは、slick.jsイベントafterChangeを使用して実行できます。

$('.sliderMain').on('afterChange', function(event, slick, currentSlide){
  if (currentSlide == 5) {
    $('.sliderMain').slick('slickPause');
    myVideo.play();
  }
});

スライダーを続行するように命令するには、ビデオが終了するタイミングを示すイベントリスナーを追加する必要もあります。次のようにすることができます：

document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
    $('.sliderMain').slick('slickPlay');
}

これで問題が発生する場合は、JSFiddleを追加してください。お手伝いします。

編集：これが機能します JSFiddle

$(document).ready(function() {
  $('.sliderMain').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.sliderSidebar',
    autoplay: true,
    autoplaySpeed: 3000
  });
  $('.sliderSidebar').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    asNavFor: '.sliderMain',
    dots: false,
    centerMode: false,
    focusOnSelect: true,
    vertical: true,
    arrows: false
  });
  $('.sliderMain').on('afterChange', function(event, slick, currentSlide) {
    if (currentSlide == 5) {
      $('.sliderMain').slick('slickPause');
      theVideo.play();
    }
  });

  document.getElementById('theVideo').addEventListener('ended', myHandler, false);

  function myHandler(e) {
    $('.sliderMain').slick('slickPlay');
  }
});
#slideBox {
  width: 1300px;
  max-height: 500px;
  overflow: hidden;
  margin: 1% auto;
  position: relative;
  top: 1em;
  background-color: #54585A;
  border-radius: .3em;
}
video {
  background-color: black;
}
#slideBox .slick-vertical .slick-slide {
  border: none;
}
.sliderSidebar {
  width: 200px;
  height: 500px;
  float: left;
}
#slideBox .slick-vertical .slick-slide {
  border: none;
}
.sliderMain {
  width: 900px;
  height: 500px;
  position: relative;
  float: left;
}
<div id="slideBox">
  <!--Sidebar-->
  <div class="sliderSidebar">
    <div><img src="http://placehold.it/200x100"></div>
    <div><img src="http://placehold.it/200x100"></div>
    <div><img src="http://placehold.it/200x100"></div>
    <div><img src="http://placehold.it/200x100"></div>
    <div><img src="http://placehold.it/200x100"></div>
    <div><img src="http://placehold.it/200x100/C8102E/FFFFFFF?text=Video" /></div>
  </div>

  <div id="main-image" class="sliderMain">
    <div><img src="http://placehold.it/900x500"></div>
    <div><img src="http://placehold.it/900x500"></div>
    <div><img src="http://placehold.it/900x500"></div>
    <div><img src="http://placehold.it/900x500"></div>
    <div><img src="http://placehold.it/900x500"></div>
    <div id="slide-video">
      <video width="900px" id="theVideo">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
      </video>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>
17
Asaf David