Video tag inside Slick

Navigation
2

I'm having a problem in my project, I installed the slick carousel, I put the images and it worked, however, I added a tag containing the path of the video and the video does not work, just a black screen appears.

Follow 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><scripttype="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><scripttype="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>
    
asked by anonymous 30.08.2017 / 15:44

1 answer

1

I found an answer on the SOen which probably solves your problem, I have adapted the answer a bit to fit your context better.

Knowing that 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 is finished, the slider continues to run: 

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

Here is an example of these working events: JsFiddle

    
30.08.2017 / 16:23
Generate columns with repeat Primefaces Can I store files in an executable?