如何在BootStrap模态框中消失后确保播放中的视频也停止播放

目前的项目需要在模态框中播放视频,但是按ESC键后,希望模态框消失,视频也停止播放。但一直无果。

首先想的是用jquery捕捉键盘事件,判断是ESC键之后,暂停播放,然后关闭模态框。
但这一想法,由于被BootStrap封装而失败。
于是想,能不能拦截BootStrap对ESC键的封装。
首先考虑,停止BootStrap自动按ESC退出的功能,于是尝试以下代码
  1. $("#myModal").modal({keyboard:false});
但这一代码使用后,对键盘事件完全无感。
于是就考虑,通过代码拦截,结果发现下面这篇文章。恍然大悟。
于是将暂停播放的代码放在关闭后的on事件的处理代码中,于是OK。
以下是原文的内容
  •  下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。
    事件 描述 实例
    show.bs.modal 在调用 show 方法后触发。
    $('#identifier').on('show.bs.modal', function () {// 执行一些动作...})
    shown.bs.modal 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。
    $('#identifier').on('shown.bs.modal', function () {// 执行一些动作...})
    hide.bs.modal 当调用 hide 实例方法时触发。
    $('#identifier').on('hide.bs.modal', function () {// 执行一些动作...})
    hidden.bs.modal 当模态框完全对用户隐藏时触发。
    $('#identifier').on('hidden.bs.modal', function () {// 执行一些动作...})

    实例

    下面的实例演示了事件的用法:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.    <title>Bootstrap 实例 - 模态框(Modal)插件事件</title>
    5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    6.    <script src="/scripts/jquery.min.js"></script>
    7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
    8. </head>
    9. <body>
    10.  
    11. <h2>模态框(Modal)插件事件</h2>
    12.  
    13. <!-- 按钮触发模态框 -->
    14. <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    15.    开始演示模态框
    16. </button>
    17.  
    18. <!-- 模态框(Modal) -->
    19. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
    20.    aria-labelledby="myModalLabel" aria-hidden="true">
    21.    <div class="modal-dialog">
    22.       <div class="modal-content">
    23.          <div class="modal-header">
    24.             <button type="button" class="close" data-dismiss="modal" 
    25.                aria-hidden="true">×
    26.             </button>
    27.             <h4 class="modal-title" id="myModalLabel">
    28.                模态框(Modal)标题
    29.             </h4>
    30.          </div>
    31.          <div class="modal-body">
    32.             点击关闭按钮检查事件功能。
    33.          </div>
    34.          <div class="modal-footer">
    35.             <button type="button" class="btn btn-default" 
    36.                data-dismiss="modal">
    37.                关闭
    38.             </button>
    39.             <button type="button" class="btn btn-primary">
    40.                提交更改
    41.             </button>
    42.          </div>
    43.       </div><!-- /.modal-content -->
    44.    </div><!-- /.modal-dialog -->
    45. </div><!-- /.modal -->
    46. <script>
    47.    $(function () { $('#myModal').modal('hide')})});
    48. </script>
    49. <script>
    50.    $(function () { $('#myModal').on('hide.bs.modal', function () {
    51.       alert('嘿,我听说您喜欢模态框...');})
    52.    });
    53. </script>
    54.  
    55. </body>
    56. </html>