2015-04-27 15 views
10

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 (

+0

si desidera che tutti i video per giocare sul caricamento della pagina o solo quello al centro? –

+0

solo uno al centro. Ora sto leggendo sull'uso di 'afterChange', ma non riesco a capire come usarlo nel mio caso. –

risposta

0

questa riga di codice

$ (' # main-slider .slick-slide '). find (' video '). get (0) .pause();

inside afterCambia la funzione di richiamata metterà in pausa tutti i video presenti nella s contenitore per il lite indipendentemente dal video riprodotto o meno.

Se ci sono 100 diapositive, mette in pausa tutti i 100 video sebbene non stiano riproducendo. Il suo meglio a trovare la diapositiva precedente e mette in pausa solo il video in quella diapositiva

0

si può solo ottenere l'id del tag video e

$("#videotagId").pause(); 
+0

È strano, ma funziona per me. Grazie –

Problemi correlati