I'm using slick slider downloaded from http://kenwheeler.github.io/slick/
I have a number of images on autoplay displaying correctly, however, i also have an mp4 file that i cant get to autoplay. Here is my 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>
And here is my script:
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
});
});
</script>
I quote @AsafDavid. Look at the working code example in the original answer.
Yes it can be done using JavaScript. When the video slide becomes the
currentSlideyou have to:
- pause the slider
- play the video
You can do this using the
afterChangeevent:$('.sliderMain').on('afterChange', function(event, slick, currentSlide){ if (currentSlide == 5) { $('.sliderMain').slick('slickPause'); myVideo.play(); } });
You can use the afterChange Callback function to achieve this.
$('.your-element').on('afterChange', function(event, slick, currentSlide, nextSlide){
$('#video')[0].play();
});
Video needs to be muted for autoplay to work.
<video autoplay muted>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>