在模式关闭/隐藏时停止/暂停视频

Question

我知道这个问题已经被问过了，但是我对我找到的任何选项都没有任何运气。我正在尝试让视频在模式关闭时停止播放或暂停视频。我遇到的一个问题是能够定位关闭按钮。我已经将console.logs放在我尝试过的函数中，它们根本没有在控制台中注册。感谢您提供的任何见解。

<div id="myModal<%= index + 1 %>"  data-id='<%= list.video_id %>'class="modal fade videoModal" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content bmd-modalContent" >
            <div class="modal-body modal-header">
              <div class="close-button">
                <button id='single' type="button" class="close fancybox-close" data-dismiss="modal" aria-label='Close' ><span aria-hidden="true">&times;</span></button>
              </div>
              <div class='embed-responsive embed-responsive-16by9'>
                <iframe id='player' class='embed-responsive-item' src="https://youtube.com/embed/<%= list.video_id %>?rel=0&enablejsapi=1" allowFullScreen='true' frameborder="0"></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>

编辑：抱歉，我尝试了太多的jQuery，以至于当时我的app.js文件夹中没有任何jQuery。这是我现在正在使用的内容。

$('[id^=myModal]').on('hidden.bs.modal', function(event) {
  console.log(player);
  event.target.stopVideo();
});

Answer 1

更新问题以更多详细信息

很难说出问题是什么，因为你只发布了html。您在定位关闭按钮时遇到问题，并且控制台.log不会触发。显然，您的javascripe文件在控制台.log行上方有一些错误。

要检测模态是否关闭，您可以使用此事件

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

在生成模态时，我不会更改模态的 id，相反，我会在这个元素上放data-attr，以便有一个.on('hidden.bs.modal')并控制每个模态

更新：

来自YouTube-API Docs https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

据说，如果你在 youtube 视频中嵌入你的 html iframe，那么在 js 中做这样的事情的那一刻：

function onYouTubeIframeAPIReady(){
    var iframe = document.getElementById("my-video");
    video = new YT.Player(iframe);
}

您

不必定义您创建的播放器的属性，它将从 iframe 中获取它。

小提琴：http://jsfiddle.net/ux86c7t3/2/

Answer 2

好吧，你可以简单地删除iframe的src，然后再次放回去;所以iframe停止运行。

 <iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf  ?>" w></iframe>
 <span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton"  data-dismiss="modal"></span>

现在是 Jquery 部分

function stopVideo(id){
  var src = $j('iframe.'+id).attr('src');
  $j('iframe.'+id).attr('src','');
  $j('iframe.'+id).attr('src',src);
}