Slick.js и html5 видео-автовоспроизведение и пауза на видео

Question

Возможно ли использовать slick.js с собственными видеороликами html5 для воспроизведения и приостановки видео без взаимодействия с пользователем?

В настоящее время у меня есть следующий код с двойным слайдером с вертикальным слайдером и основным разделом, где будут отображаться большие изображения и видео и прокручиваться автоматически. Это будет размещено на телевидении, поэтому взаимодействие с пользователем не будет.

WelcomeTV Screen Site

Как я могу иметь слайд, содержащий видео игру полностью, как только он появляется и после ее завершения, продолжить слайд-шоу и повторять до бесконечности. Видеоролики могут содержать различные длины, поэтому необходимо динамически определять длину.

Я попытался реализовать код на this question, однако мне не удалось заставить мой пример работать.

<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> 

Demo

Answer 1

Да, это можно сделать с помощью JavaScript.
Когда видео слайд становится currentSlide вам нужно:

1. пауза слайдер
2. воспроизведения видео

Вы можете сделать это, используя событие slick.js afterChange:

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

Вам также необходимо добавить прослушиватель событий, когда заканчивается видео, чтобы заказать слайдер для сотрудничества ntinue. Вы можете сделать это так:

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

Если у вас возникли проблемы с этим, пожалуйста, добавьте JSFiddle и я постараюсь вам помочь.

Edit: Вот рабочие 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>