Tag video inside Slick

Question

Tag video inside Slick

Asked 7 years, 2 months ago

Viewed 168 times

2

I’m having a problem in my project, installed the Slick Carousel, put the images and worked, however, I added a tag containing the video path and the video does not work, just appears a black screen.

Follows the code:

<body>
<div class="window">
  <div class="window-content">
    <div class="comercial">
      <div>
        <img src="./resources/Planet-on-top-of-blue-clouds_1920x1080.jpg" style="width: 100%;"/>
      </div>
      <div>
        <video>
          <source src="./resources/Nicky Romero - Toulouse.mp4" type="video/mp4" style="width: 100%;"/>
        </video>
      </div>
      <div>
        <img src="./resources/Tiger-robot_1920x1080.jpg" style="width: 100%;"/>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script>
$(document).ready(function(){
  $('.comercial').slick({
    autoplay: true,
    arrows: false,
    fade: true,
    infinite: true,
    cssEase: 'linear'
  });
});
</script>
</body>

1 answer

Browser other questions tagged javascript html css html5-video

You are not signed in. Login or sign up in order to post.

by Mathiasfc • **5,837** points · Answer 1 · 2017-08-30T14:23:56+00:00

I found an answer in Soen that probably solves your problem, I adapted a little the answer p/ to suit your context better.

Knowing the video url is correct, you will need two events to sync the slider with the video.

When you get to the video slide, pause the slider and play in the video:

$('.comercial').on('afterChange', function(event, slick, slide ) {
  if (slide == 1) {
    $('.comercial').slick('slickPause');
    meuVideo.play();
  }
});

When the video finishes, continue running the slider:

$('#meuVideo').on('ended', function() {
  $('.comercial').slick('slickPlay');
});

Here is an example of these events in operation: Jsfiddle