模态关闭/隐藏时停止/暂停视频答案

【问题标题】：stop/pause video when modal closes/hides模态关闭/隐藏时停止/暂停视频
【发布时间】：2017-11-08 03:36:58
【问题描述】：

我知道有人问过并回答了这个问题，但我对找到的任何选项都不满意。我试图让视频在模式关闭时停止播放或暂停视频。我遇到的一个问题是能够定位关闭按钮。我已将 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();
});

【问题讨论】：

标签： javascript jquery ruby-on-rails youtube-api bootstrap-modal

【解决方案1】：

用更多细节更新问题

真的很难说是什么问题，因为你只发布了 html。您在定位关闭按钮时遇到问题，并且您的 console.log 没有触发。显然，您的 javascipe 文件在您的 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

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

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

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

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

【讨论】：

当我没有特定的动态数据目标时，即使我点击另一个视频，它也会播放列表中的第一个视频。
什么列出什么视频。我不明白实际问题在哪里。我的意思是data-attr，它可能是data-id，只是为了知道你关闭了哪个模式。想象一下，你需要为每个模态处理 EVENT，每个模态都有不同的 id，所以你会复制这个 $('#myModal').on('hidden.bs.modal', function (e) { // do something... }) 吗？而不是。相反，您将有一个事件在任何模式关闭时触发，并且在您通过 this (e) in function 定位的内部...仍然没有太多细节问题
我正在遍历视频对象的集合（列表 == 视频，我对事物的命名很糟糕：P）。我没有把迭代从那里开始，因为我认为它不相关。我的原始问题中没有 js，因为我在询问时没有任何 js，因为我尝试了很多不同的东西，最终删除了该功能并希望在这里找到解决方案。我试过定位父元素的类。我只是不太擅长 JS，无法真正表达我的脚本问题
您应该修复命名约定，因为它具有误导性；] 列表应该是列表，视频应该称为视频 :) 我可以看到 rails 生成了这个modal.html。可能您可以打开它、播放视频、关闭它并停止视频。我不知道当时它是您生成的唯一一个模态，还是您在几个视频之间进行选择并且您想要交换模态的内容，或者您不想交换内容但您生成了几个模态并且每个模态都有自己的内容视频，所以你的模态可能有.className 然后你可以使用这种方式 `$('.className').on... 来控制所有模态
我的意思是这个事件 $('.className').on('hidden.bs.modal') 并且在这个事件中你需要本地化你想要停止的视频的 ID，可能是基于关于那个模式里面的东西......有很多可能性，我不知道你想要完成哪一个

【解决方案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);

}

【讨论】：