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

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。您在定位关闭按钮时遇到问题，并且您的 console.log 未触发。显然，您的 javascripe 文件在 console.log 行上方有一些错误。

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

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

在生成模态时，我不会更改模态的 id，而是将 data-attr 放在该元素上，以获得一个 .on('hidden.bs.modal') 并控制每个模式

更新:

来自 youtube-api 文档 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);
}

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

fiddle :http://jsfiddle.net/ux86c7t3/2/