1

Bom dia, Estou com um problema, queria exibir um modal ao final de cada vídeo, no primeiro vídeo funcionou certinho, porém no segundo não estou conseguindo...

Segue código abaixo...

Se alguém puder ajudar agradeço muito!

var vid = document.getElementById("video_ctrl"); 
    function playVid() { 
    myVideo.play(); 
    }
    document.getElementById('video_ctrl').addEventListener('ended',myHandler,false);
    function myHandler(e) {
     $('#myModal').modal('show');
    }
      
    document.getElementById('video_ctrl1').addEventListener('ended',myHandler,false);
    function myHandler(e) {
     $('#myModal1').modal('show');
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="div_video">
            <video autoplay id="video_ctrl" width="100%">
                <source src="img/abertura.ogv" type="video/mp4" />
            </video>
        </div>

            <script>
                function setvideo(src) {
                    document.getElementById('div_video').innerHTML = '<video autoplay id="video_ctrl1" style="width: 100%;"><source         src="' + src + '" type="video/mp4"></video>';

                }
            </script>
      
        <div id="myModal" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Modal Header</h4>
              </div>
              <div class="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div class="modal-footer">
                <button type="button" onClick="setvideo('img/video2.mp4');" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>
        <div id="myModal1" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Modal Header</h4>
              </div>
              <div class="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div class="modal-footer">
                <button type="button" onClick="setvideo('img/video2.mp4');" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>

1 Resposta 1

2

Isso acontece porque estas a criar o elemento dinamicamente, nesses caso é necessário utilizar o observador de eventos on do jQuery e adicionar o evento função após a criação do elemento:

$('#myModal').on('hide.bs.modal', function setvideo(event) {

    var src = $(this).data('next-video');
    
    $('#div_video').html('<h5>Vídeo 2</h5><video id="video_ctrl1" style="width: 100%;" autoplay><source src="' + src + '" type="video/mp4"></video>');
   
    $('#video_ctrl1').on('ended', function(e) {
        $('#myModal1').modal('show');
    }); 
});

$('#video_ctrl').on('ended', function (e) {
    $('#myModal').modal('show');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div id="div_video">
    <h5>Vídeo 1</h5>
    <video id="video_ctrl" width="100%" autoplay>
        <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4" />
    </video>
</div>

<div id="myModal" class="modal fade" role="dialog" data-next-video="http://www.w3schools.com/tags/movie.mp4">
    <div class="modal-dialog">
        
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        
    </div>
</div>
<div id="myModal1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        
    </div>
</div>

Obs.: Eu utilizei o evento hide do modal Bootstrap para criar o vídeo e o parâmetro adicionei ao modal como um data-attribute, mas se quiser pode manter do jeito que estava utilizando. O ponto é registrar o evento após a criação do elemento.

3
  • Não deu certo, Agora não abriu o modal nem do primeiro video :( Commented 22/07/2015 às 11:44
  • Opa @YuriRodrigues, por algum motivo ele não funcionou como deveria, mas não estou com tempo pra investigar agora. Editei a resposta, dessa forma com certeza funciona.
    – KaduAmaral
    Commented 22/07/2015 às 12:09
  • Muito obrigado, deu certo! Salvou meu dia!. Commented 22/07/2015 às 12:14

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

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