Jquery final event of the video

Question

Jquery final event of the video

Navigation

#1 by (2 votes)

1

Good morning, I have a problem, I wanted to display a modal at the end of each video, the first video worked correctly, but in the second I can not ...

Follow the code below ...

If anyone can help, thank you very much!

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><scriptsrc="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>

html jquery html5 video

asked by anonymous 22.07.2015 / 13:28

1 answer

Views with php transition with the controller Session variable "balance" does not update

score 2 · Accepted Answer

This happens because you are creating the element dynamically, in which case you need to use the event observer % with% of jQuery and add the function event after element creation:

$('#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><scriptsrc="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>

Note: I've used the Bootstrap modal% wrapper to create the video and the parameter I added to the modal as a on , but if you want you can keep it the way you were using it. The point is to register the event after the element has been created.