0

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?

<section class="mbr-slider mbr-section mbr-section__container carousel slide mbr-section-nopadding mbr-after-navbar"
         data-ride="carousel" data-keyboard="false" data-wrap="true" data-interval="5000" id="slider-0">
    <div>
        <div>
            <div>
                <ol class="carousel-indicators">
                    <li data-app-prevent-settings="" data-target="#slider-0" data-slide-to="0" class="active"></li>
                    <li data-app-prevent-settings="" data-target="#slider-0" data-slide-to="1"></li>
                    <li data-app-prevent-settings="" data-target="#slider-0" data-slide-to="2"></li>
                    <li data-app-prevent-settings="" data-target="#slider-0" class="" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                    <div class="mbr-section mbr-section-hero carousel-item dark center mbr-section-full active"
                         data-bg-video-slide="false">
                            <source src="assets/images/PMBASIS_2018.mp4" type="video/mp4" autoplay muted loop></source>

                        <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>
</section>
2
  • Tag HTML não, mas existe o evento JS. Provavelmente você utilizou alguma espécie de temporizador para passar o slide sozinho, então, para o vídeo, basta associar esse evento ao evento de finalização do mesmo.
    – Woss
    Commented 13/08/2018 às 16:06
  • @AndersonCarlosWoss usei a tag (data-interval"5000") em html: code <section class="mbr-slider mbr-section mbr-section__container carousel slide mbr-section-nopadding mbr-after-navbar" data-ride="carousel" data-keyboard="false" data-wrap="true" data-interval="5000" id="slider-0"> <div> code
    – Isabela
    Commented 13/08/2018 às 19:53

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .