-1

Tenho um slide com 3 imagens e um vídeo que está no incio, preciso fazer com que o vídeo fique até o final, no entanto ele está passando para as próximas imagens e se vc clicar para voltar e exibir ele está passando. Existe alguma Tag em html para fazer um vídeo passar para a próxima imagem apenas quando o vídeo terminar?

                    <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>

5
  • ai já tens de usar javascript
    – 13dev
    Commented 13/08/2018 às 16:10
  • 1
    Cara Isabela, por favor não duplique perguntas, não somos um fórum de helpdesk, aguarde a sua outra pergunta ser respondida com paciencia, somos comunitários aqui, nem sempre temos tempo para responder a todos, respondemos dentro da medida do possivel. Recomendo que leia: Perguntas antigas podem ser postadas novamente
    – Syzoth
    Commented 13/08/2018 às 19:24
  • @GuilhermeNascimento estava tentando colocar uma parte do código que não foi inserido, mas não deu certo... você sabe alguma forma de inserir quando acontecer isso?
    – Isabela
    Commented 13/08/2018 às 19:46
  • Cara @Isabela basta selecionar o código dentro da edição e apertar Ctrl+K. Editei a sua resposta para o código aparecer: pt.stackoverflow.com/posts/321732/revisions
    – Syzoth
    Commented 13/08/2018 às 19:48
  • @GuilhermeNascimento Ok, obrigada!
    – Isabela
    Commented 13/08/2018 às 19:51

1 Resposta 1

0

Sim tem como, basta capturares os eventos do video e pausares o carousel exemplo:

// 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();
});

Tem atenção, aconselhava criares uma classe única para os vídeo(s) e ai sim capturas os eventos pela classe.

1
  • 13dev entendi, obrigada. Vou fazer isso e ver se vai dar certo aqui.
    – Isabela
    Commented 13/08/2018 às 19:47

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .