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

Punch

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>

Ing

Thanks for the help. I have this fiddle I put together. link I tried implementing your code and ran into a recurring issue where I get this message: Uncaught TypeError: $(...).play is not a function – Punch

fixed the code a bit + added my own working JSFiddle – Ing

Thanks so much! This saved me a lot of headaches. Would the same/similar solution apply to Youtube and Vimeo or would I need to refer to their APIs? – Punch

I'm not sure about that. I know both of them are using HTML5 video, so it might work. You'll know soon enough...In any case their API's are quite friendly. Enjoy! – Ing

One more question: Would it be possible to have the slick carousel detect all slides with a certain class of video for example and have it preform in the same manner as this one slide? I've toyed around with the if (currentSlide == 5) { area to no avail. – Punch

A solution will need to involve Jquery hasClass function and maybe a :nth-child(currentSlide) in some way. You can write a new question about it, and if I don't see it you can contact me to help. maybe even leave here a comment with the link to the question – Ing

Thanks, I added a new question here – Punch

Thanks for the Jsfiddle its works for me, no i have two query regarding this. 1) how can i implement slide number dynamically (as you have done with 5)? 2) and how to pause video when another slide happens and resume it once video slide comes ? – Tova

I think it's better to write a new question for each, including an explanation and a code example – Ing