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">×</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">×</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.