Io uso la giostra slick http://kenwheeler.github.io/slick/ sulla mia pagina e ora ho bisogno di aggiungere video con riproduzione automatica al suo interno.
Io uso questo codice HTML
aggiungi la riproduzione automatica per video in carosello lucido
<div class="main-slider" id="main-slider">
<div>
<div class="video-wrapper">
<video autoplay loop class="pageBackground-video">
<source src="/Content/video/332145276.mp4" type="video/mp4">
</video>
</div>
</div>
<div>
<div class="video-wrapper">
<video autoplay loop class="pageBackground-video">
<source src="/Content/video/332145276.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
e sceneggiatura
$('#main-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 30000,
dots: true,
infinite: true,
adaptiveHeight: true,
arrows: false
});
ma autoplay non funziona. C'è un modo per far funzionare la riproduzione automatica?
upd Ho cercato di usare
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
var video = currentSlide.children('video').get(0).play();
});
ma ottengo un errore Uncaught TypeError: currentSlide.children is not a function
perché currentSlide
è solo un numero (0,1, ecc). Come ottenere l'elemento corrente?
UPD2 Ho usato questo codice e funziona
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
$('#main-slider .slick-slide').find('video').get(0).pause();
var video = $('#main-slider .slick-active').find('video').get(0).play();
});
ma ora lavoro autoplay per tutti i video perfettamente, ma solo dopo le prime modifiche slick. Come farlo funzionare per il primo video dopo aver caricato solo la pagina.
UPD3 Ho usato questo codice
var video = $('#main-slider .slick-active').find('video').get(0).play();
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
$('#main-slider .slick-slide').find('video').get(0).pause();
var video = $('#main-slider .slick-active').find('video').get(0).play();
});
e ora tutto il lavoro come voglio, ma ho paura che il mio codice è brutta (
si desidera che tutti i video per giocare sul caricamento della pagina o solo quello al centro? –
solo uno al centro. Ora sto leggendo sull'uso di 'afterChange', ma non riesco a capire come usarlo nel mio caso. –