Slick.js and html5 video autoplay and pause on video

Question

Is it possible to use slick.js with html5 self hosted videos, to play and pause a video without user interaction?

I currently have the following code to have a dual slider with a vertical slick slideshow and a main section where the large image and video will appear and scroll automatically. This will be hosted on a television so there will be no user interaction.

WelcomeTV Screen Site

How can I have the slide containing video play completely once it appears and once it finishes, continue the slideshow and repeat indefinitely. The videos may contain various lengths so it would need to detect the length dynamically.

I tried implementing the code on this question however I was not able to get my example working.

    <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

Yes it can be done using JavaScript.
When the video slide becomes the currentSlide you need to:

1. pause the slider
2. play the video

You can do this using the slick.js event afterChange:

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

You will also need to add an event listener for when to video ends in order to order the slider to continue. You can do so like this:

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

If you're having trouble with this, please add a JSFiddle and I'll try help you there.

Edit: here's a working 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="https://via.placeholder.com/200x100"></div>
    <div><img src="https://via.placeholder.com/200x100"></div>
    <div><img src="https://via.placeholder.com/200x100"></div>
    <div><img src="https://via.placeholder.com/200x100"></div>
    <div><img src="https://via.placeholder.com/200x100"></div>
    <div><img src="https://via.placeholder.com/200x100/C8102E/FFFFFFF?text=Video" /></div>
  </div>

  <div id="main-image" class="sliderMain">
    <div><img src="https://via.placeholder.com/900x500"></div>
    <div><img src="https://via.placeholder.com/900x500"></div>
    <div><img src="https://via.placeholder.com/900x500"></div>
    <div><img src="https://via.placeholder.com/900x500"></div>
    <div><img src="https://via.placeholder.com/900x500"></div>
    <div id="slide-video">
      <video width="900px" id="theVideo">
        <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.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>