Jquery video final event

Question

Good morning, I have a problem, I wanted to display a modal at the end of each video, in the first video it worked right, but in the second I’m not getting...

Follows code below...

If anyone can help, I’d really appreciate it!

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>

Answer 1

This is because you are creating the element dynamically, in which case it is necessary use the event observer on jQuery and add the function event after creating the element:

$('#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.: I used the event hide modal Bootstrap to create the video and the parameter I added to the modal as a data-attribute, but if you want you can keep it the way you were using it. The point is to record the event after creating the element.