Twitter Bootstrap：重新打开模态窗口后模态窗口不播放视频答案

【问题标题】：Twitter Boostrap : modal window not playing video after reopning the modal windowTwitter Bootstrap：重新打开模态窗口后模态窗口不播放视频
【发布时间】：2016-05-05 14:37:55
【问题描述】：

我有 5 个链接，可在模式窗口中打开 5 个不同的视频，以下代码在模态窗口中播放视频，并在模态窗口关闭时停止视频。

但是，当我再次尝试打开相同的视频时，该视频在模态窗口中被禁用并且不再可播放。有解决办法吗？

这是模态窗口代码和下面的javascript和小提琴链接

MY FIDDLE

模态

<div class="modal fade video2 advSearchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Video 2</h4>
      </div>
      <div class="modal-body">

        <div class="row">
          <div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube">
            <div class="embed-responsive embed-responsive-16by9">

              <video class="embed-responsive-item" controls src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" type="video/mp4"> </video>

            </div>
          </div>

        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-primary">Send message</button> -->
      </div>
    </div>
  </div>
</div>

$(document).ready(function() {
  $(document).ready(function() {
    $(".advSearchModal").on('hide.bs.modal', function(evt) {
      var player = $(evt.target).find('video'),
        vidSrc = player.prop('src');
      player.prop('src', ''); // to force it to pause
      player.prop('src', vidSrc);
    });
  });
});

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

我正在使用以下技巧来停止 HTML5 视频。 pause() 关闭模态视频并设置 currentTime = 0;

$(".advSearchModal").on('hide.bs.modal', function(evt) {
  $(evt.target).find('video').get(0).pause();
  $(evt.target).find('video').get(0).currentTime = 0; 
});

设置currentTime = 0，当你打开modal时开始播放视频。

【讨论】：