Estoy usando el control deslizante pulido descargado de http://kenwheeler.github.io/slick/
Tengo varias imágenes en la reproducción automática que se muestran correctamente, sin embargo, también tengo un archivo mp4 que no puedo acceder a la reproducción automática. Aquí está mi HTML:
<section class="regular slider" style="width: 900px; left: 60px; top: 230px;"> <div> <video autoplay> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> </video> </div> <div> <img src="https://placehold.it/350x300?text=2"> </div> <div> <img src="https://placehold.it/350x300?text=3"> </div> </section>Y aquí está mi guión:
<script type="text/javascript"> $(document).on('ready', function() { $(".regular").slick({ dots: true, infinite: true, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000 }); }); </script>Cito a @AsafDavid. Mire el ejemplo de código de trabajo en la respuesta original .
Sí, se puede hacer usando JavaScript. Cuando la diapositiva de video se convierte en la
currentSlide, debe:
- pausar el control deslizante
- reproducir el video
Puedes hacer esto usando el evento
afterChange:$('.sliderMain').on('afterChange', function(event, slick, currentSlide){ if (currentSlide == 5) { $('.sliderMain').slick('slickPause'); myVideo.play(); } });
Puede usar la función de devolución de llamada afterChange para lograr esto.
$('.your-element').on('afterChange', function(event, slick, currentSlide, nextSlide){ $('#video')[0].play(); });El video debe silenciarse para que funcione la reproducción automática.
<video autoplay muted> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> </video>