Question

我是使用bootstrap Modal的javascript的新手，但是当我按下关闭按钮或关闭图标时，我不确定如何停止我的YouTube视频。

有人可以解释我如何让我的视频停止播放？

这是我的代码：

<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" id="video">
                     'VIDEO URL HERE'
                            </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
 </div>

和我的Javascript在这里：

<script type="text/javascript">
  jQuery('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
  jQuery('#myModal video').attr("src", jQuery("#myModal  video").attr("src"));
});
</script>

任何帮助和建议将不胜感激:)

Answer 1

您应该在<iframe>标记中启用youtube api：

<iframe src="https://www.youtube.com/embed/ZrXbX8cWrvQ?enablejsapi=1&version=3&playerapiid=ytplayer" allowscriptaccess="always"></iframe>

我在?enablejsapi=1&version=3&playerapiid=ytplayer属性中添加了src作为查询字符串，并添加了属性allowscriptaccess="always"。

之后，您将可以使用stopVideo功能：

$('#myModal').on('hidden.bs.modal', function(e) {
    var iframeElement = $(this).find('iframe')[0];
    var action = { event: 'command', func: 'stopVideo', args: '' };
    iframeElement.contentWindow.postMessage(JSON.stringify(action), '*');
});

这是working jsfiddle。

希望有所帮助：）

Answer 2

Plunker代码可以帮助您，就像它帮助了我一样。

HTML：

<head>
    <title>Autostop Videos in Closed Modal</title>

    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link rel="stylesheet" href="style.css">

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Autostop Videos in Closed Modal</h1>

    <ul class="nav" >
      <li><a href="#" data-toggle="modal" data-target="#video1">Video 1</a></li>
      <li><a href="#" data-toggle="modal" data-target="#video2">Video 2</a></li>
    </ul>

    <div class="modal fade" id="video1">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Video 1</h4>
          </div>

          <div class="modal-body">

            <iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="video2">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Video 2</h4>
          </div>

          <div class="modal-body">

            <iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

          </div>
        </div>
      </div>
    </div>

  </body>

JS：

$(function(){
  $('.modal').on('hidden.bs.modal', function (e) {
    $iframe = $(this).find("iframe");
    $iframe.attr("src", $iframe.attr("src"));
  });
});

Answer 3

Try to add an onClick action in your close button as below.

 <button type="button" class="btn btn-default" data-dismiss="modal" onclick="document.getElementById('video').pause();">Close</button>

And remember to change 'video' to your own #videoID.

javascript - 当Modal关闭Bootstrap时停止播放视频

3 个答案: