We are using Slick Carousel with video in the slider. There are 3 slides with a different video in each. All the videos are the same size and are all 6 seconds long. The slider is set to change after 6 seconds.
So in theory the videos should start when each slider is displayed. unfortunately this is not the case and over time the videos become progressively out of sync.
The site and videos are both hosted on umbraco cloud.
Does anyone know how to sync these videos so they start to play when the slider is displayed each time.
// BANNER
// PLAYS VIDEO IN BANNER
$('.usn_cmp_banner .slides').on('init', function(slick){
$('.usn_cmp_banner video').each(function () {
this.play();
});
});
// ALL CAROUSELS
$(".component:not(.usn_cmp_banner) .slides, footer#site-footer .slides").slick({
rtl: rtl_slick(),
infinite: true,
speed: 600,
adaptiveHeight: true,
pauseOnFocus: false,
pauseOnHover: false,
prevArrow: '<div class="slick-prev"><i class="icon usn_ion-ios-arrow-back"></i>',
nextArrow: '<div class="slick-next"><i class="icon usn_ion-ios-arrow-forward"></i>'
});
This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/104440-syncing-video-with-slick-carousel