Question

HTML：

<div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color:white;">&times;</button>

                </div>
                <div class="modal-body">

                   <video id='videoPlayer' width="100%" height="100%" controls="controls">
                        <source id='mp4Source' src="" type="video/mp4" />
                        <!--<source id='oggSource' src="movie.ogg" type="video/ogg" />-->
                     </video>
                </div>
            </div>
        </div>
    </div>
</div>

JS

function play(i){  


    var x = document.getElementById("hidden_"+i).value;

    var player = document.getElementById('videoPlayer');

    var mp4Vid = document.getElementById('mp4Source');

    player.pause();

      // Now simply set the 'src' property of the mp4Vid variable!!!!

    mp4Vid.src = x;


    player.load();
    $('#myModal').modal('show'); 
}

我在模态中播放视频但是当我在视频完成之前单击模态的一侧时模态将隐藏但视频继续播放

Answer 1

您可以使用活动hide.bs.modal。查看文档here。

$('#myModal').on('hide.bs.modal', function(){
    player.pause();
})

Answer 2

function bouncer(arr) {
  var array = arr.filter(function(val){
    return val;
  });
  return array;
}

视频播放器在关闭模态后仍在播放

2 个答案: