Sospensione del carosello Bootstrap Quando si riproduce un video

Question

Ho una diapositiva multipla con video e immagini. Carousel è impostato per la riproduzione automatica quando caricato. Ma quando qualcuno suona un video e sposta il mouse fuori dal lato continua a scivolare (come previsto).

Come si tiene traccia di quando un video è in riproduzione e si interrompe? Ho cercato intorno a SO ma non ho trovato una domanda simile.

L'amministratore del sito aggiungerà video in un secondo momento in modo che possano essere iframe o video html5. Quindi, ho bisogno di una soluzione che funzioni per entrambi.

Answer 1

$ ("# myCarousel"). Carousel ('pause'); per fermarlo $ ("# myCarousel"). Carousel(); per riavviarlo http://www.w3.org/2010/05/video/mediaevents.html ci sono molti eventi in cui dovresti ricominciare da capo, anche mettere in pausa, terminare gli eventi e sparare in gioco.

per YouTube non sono sicuro di come si integrarlo ma hanno js API in modo https://developers.google.com/youtube/js_api_reference#Events vi mostrerà gli eventi che si possono ascoltare e fare lo stesso come u ha fatto con il video HTML5

Answer 2

Questo ha funzionato per me mettere in pausa il carosello Bootstrap quando viene riprodotto un video HTML5 nativo e riprodurlo di nuovo quando un video viene messo in pausa o terminato. Sono un principiante assoluto di JS, ma ho cercato in giro e ho messo insieme alcune cose. Potrei aver fatto un errore (probabile) ma funziona per me.

Non chiamo video per ID perché voglio che l'azione funzioni su qualsiasi video riprodotto nel carosello. Ne ho alcuni nel mio caso

Nota per modificare l'ID della giostra in modo che corrisponda al proprio.

<script> 
$('video').on('play', function (e) { 
    $("#portfolioCarousel").carousel('pause'); 
}); 
$('video').on('stop pause ended', function (e) { 
    $("#portfolioCarousel").carousel(); 
}); 
</script>