Skip to main content
adicionou 11 caracteres ao conteúdo
Fonte Link
KaduAmaral
  • 11,7mil
  • 1
  • 34
  • 81

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

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

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:

adicionou 9 caracteres ao conteúdo
Fonte Link
KaduAmaral
  • 11,7mil
  • 1
  • 34
  • 81

Isso acontece porque estas a criar o elemento dinamicamente, nesses caso é necessário utilizar o oscultador on do jQuery e coloque-o dentro dautilizar o oscultador on do jQuery e adicionar o evento função após a criação do vídeoelemento:

Isso acontece porque estas a criar o elemento dinamicamente, nesses caso é necessário utilizar o oscultador on do jQuery e coloque-o dentro da função após a criação do vídeo:

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

adicionou 2908 caracteres ao conteúdo
Fonte Link
KaduAmaral
  • 11,7mil
  • 1
  • 34
  • 81

Isso acontece porque estas a criar o elemento dinamicamente, nesses caso é necessário utilizar o oscultador on do jQuery e coloque-o dentro da função após a criação do vídeo:

Tente assim:

$('#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>
$(document).on('ended', '#video_ctrl', function(e) {
  $('#myModal').modal('show');
});


$(document).on('ended', '#video_ctrl1', function(e) {
  $('#myModal1').modal('show');
});

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.

Isso acontece porque estas a criar o elemento dinamicamente, nesses caso é necessário utilizar o oscultador on do jQuery:

Tente assim:

$(document).on('ended', '#video_ctrl', function(e) {
  $('#myModal').modal('show');
});


$(document).on('ended', '#video_ctrl1', function(e) {
  $('#myModal1').modal('show');
});

Isso acontece porque estas a criar o elemento dinamicamente, nesses caso é necessário utilizar o oscultador on do jQuery e coloque-o dentro da função após a criação do vídeo:

$('#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.

Fonte Link
KaduAmaral
  • 11,7mil
  • 1
  • 34
  • 81
Carregando