javascript - 在 Bootstrap 模态中自动播放的视频，在模态关闭时停止

Question

我阅读了很多类似的帖子，但没有找到适合我的项目的解决方案。

我想让用户用一个简单的 <a> 来显示/隐藏 Bootstrap 模式应答器。这是一个 autoplay=1 的 Youtube iframe。

第一个问题是，当页面加载时，视频正在启动，我们可以听到声音，但当然无法在出价模式中看到视频。第二个问题，我需要在用户用叉号关闭模态框或只是在模态框外单击时停止播放视频。

这是一个在线演示:See live demo

这是我的代码，我使用的是 Bootstrap 3+:

<div aria-labelledby="myModalLabel" class="modal fade responsive-video" id="myModal" role="dialog" tabindex="-1">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
  </div>
  <div class="modal-body"></div>
</div>

和 JS:

<script>
  $('#myModal').on('show', function () {
    $('div.modal-body').html('<iframe width="100%" height="360" src="https://www.youtube.com/embed/PUcTN5ou2o0?autoplay=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
  });
  $('#myModal').on('hide', function () {
    $('div.modal-body').html('');
  });
</script>

Answer 1

您最初可以将 iframe 的 SRC 属性留空，仅在用户打开模式窗口时将其设置为所需的 autoplay=1 YouTube 视频。

HTML:

<div aria-labelledby="myModalLabel" class="modal fade responsive-video" id="myModal" role="dialog" tabindex="-1">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
  </div>
  <div class="modal-body">
    <iframe id="youtube" src="" />
  </div>
</div>

JS:

<script>
  $('#myModal').on('show', function () {
    $('div.modal-body iframe#youtube').attr('src', 'https://www.youtube.com/embed/PUcTN5ou2o0?autoplay=1&rel=0&showinfo=0');
  });
  $('#myModal').on('hide', function () {
    $('div.modal-body iframe#youtube').attr('src', '');
  });
</script>