2

Estou tendo um problema no meu projeto, instalei o slick carousel, coloquei as imagens e funcionou, porém, eu adicionei uma tag contendo o caminho do vídeo e o vídeo não funciona, apenas aparece uma tela preta.

Segue o código:

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

1

Encontrei uma resposta no SOen que provavelmente soluciona o teu problema, adaptei um pouco a resposta p/ se adequar melhor ao teu contexto.

Sabendo que a url do vídeo está correta, você irá precisar de dois eventos para sincronizar o slider com o vídeo.

Quando chegar no slide do vídeo, pausa o slider e da play no vídeo:

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

Quando o vídeo terminar, continua a execução do slider:

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

Segue um exemplo destes eventos em funcionamento: JsFiddle

1
  • 1
    Perfeito, deu certo. Muito obrigado pela a ajuda, eu estava meio que quebrando a cabeça hsauhsa, agradecido! Commented 30/08/2017 às 18:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .