Slidershow Carrousel video and image [duplicate]

Navigation
-1

I have a slide with 3 images and a video that is in the beginning, I need to make the video stay until the end, however it is going to the next images and if you click to go back and view it is passing. Is there any html tag to make a video move to the next image only when the video is finished?

                                                                                                                                                                                                                   

                    <div class="mbr-table-cell">
                        <div class="mbr-overlay" style="opacity: 0.3;"></div>
                        <div class="container-slide container">

                            <div class="row">
                                <div class="col-md-8 col-md-offset-2 text-xs-center">
                                    <h2 class="mbr-section-title display-1"><br>PM<br></h2>

                                    <p class="mbr-section-lead lead"><strong></strong><br>
                                    </p>

                                    <div class="mbr-section-btn"><a href="pm converse/pmconverse.php" target="_blank" class="btn btn-lg btn-white btn-white-outline">ASSISTA<br>
                                    </a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mbr-section mbr-section-hero carousel-item dark center mbr-section-full"
                     data-bg-video-slide="false"
                     style="background-image: url(assets/images/pm_converse.png);">
                    <div class="mbr-table-cell">
                        <div class="mbr-overlay" style="opacity: 0.4;"></div>
                        <div class="container-slide container">

                            <div class="row">
                                <div class="col-md-8 col-md-offset-2 text-xs-center">
                                    <h2 class="mbr-section-title display-1"><br>PM CONVERSE</h2>

                                    <p class="mbr-section-lead lead"><strong>Escritório de Projetos como serviço</strong><br>
                                    </p>

                                    <div class="mbr-section-btn"><a
                                            href="pm converse/pmconverse.php"
                                            target="_blank" class="btn btn-lg btn-white btn-white-outline">SAIBA MAIS<br>
                                    </a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mbr-section mbr-section-hero carousel-item dark center mbr-section-full"
                     data-bg-video-slide="false"
                     style="background-image: url(assets/images/eXperience.png);">
                    <div class="mbr-table-cell">
                        <div class="mbr-overlay" style="opacity: 0.4;"></div>
                        <div class="container-slide container">

                            <div class="row">
                                <div class="col-md-8 col-md-offset-2 text-xs-center">
                                    <h2 class="mbr-section-title display-1"><br>PM<br>eXperience</h2>

                                    <p class="mbr-section-lead lead">Diminuímos o gap entre a academia e a prática, a teoria e a experiência. Conheça a proposta eXperience de formação.</p>

                                    <div class="mbr-section-btn"><a
                                            href="experience/experience.php"
                                            target="_blank" class="btn btn-lg btn-success">CONHEÇA</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mbr-section mbr-section-hero carousel-item dark center mbr-section-full"
                     data-bg-video-slide="false"
                     style="background-image: url(assets/images/parceiros.png);">
                    <div class="mbr-table-cell">
                        <div class="mbr-overlay" style="opacity: 0.5;"></div>
                        <div class="container-slide container">

                            <div class="row">
                                <div class="col-md-8 col-md-offset-2 text-xs-center">
                                    <h2 class="mbr-section-title display-1"><br><br><br>PARCEIROS</h2>

                                    <p class="mbr-section-lead lead">Conheça nossos novos parceiros da<br>jornada 2018 junto de nossos clientes.</p>

                                    <div class="mbr-section-btn"><a
                                            href="#parceiros"
                                            target="_blank" class="btn btn-lg btn-info">SAIBA MAIS</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            <a data-app-prevent-settings="" class="left carousel-control" role="button" data-slide="prev"
               href="#slider-0">
                <span class="icon-prev" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a data-app-prevent-settings="" class="right carousel-control" role="button" data-slide="next"
               href="#slider-0">
                <span class="icon-next" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

    
asked by anonymous 13.08.2018 / 18:07

1 answer

0

Yes, you can just capture the events of video and pause carousel example: 

// capturar evento 'play'
$('video').on('play', function (e) {
    $("#carousel").carousel('pause');
});

//capturar os 3 eventos, stop pause e ended
$('video').on('stop pause ended', function (e) {
    $("#carousel").carousel();
});

Be careful , I would advise you to create a single class for the video (s), and then actually capture the events in the class.

    
13.08.2018 / 18:19
Location API Maps javaScripts [closed] Create new row with input in table when hit enter