模式关闭时如何停止播放嵌入式 iframe youtube 视频？

Question

我已经在 SO 的不同帖子上尝试了解决方案，但 none 似乎工作正常。

我有一个带有播放视频的 iframe 的模式，这似乎有效，但我一直试图在关闭模式时完全停止视频，但它似乎仍在尝试播放。

iframe 元素

<iframe class="modal-iframe" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/VIDEO?&controls=0&rel=0&showinfo=0&playlist=VIDEO&loop=1&autoplay=1" frameborder="0"></iframe>

Opening/Closing 事件

$(".custom-modal").on("hidden.bs.modal", function (e) {

var iframe = $('#' + e.target.id).find("iframe");

if (iframe.attr("src") && iframe.attr('src').indexOf('autoplay') != -1) {
                var newURL = iframe.attr('src').substring(0, iframe.attr('src').length - 11);
                iframe.attr('src', newURL);
}

})


$('.custom-modal').on('show.bs.modal', function (e) {
var iframe = $('#' + e.target.id).find("iframe");
if (iframe) {
        var videoSrc = iframe.attr("src");
        iframe.attr("src", videoSrc+"&autoplay=1");
}
});

这似乎在某种程度上起作用并且 autoplay 标签是 appended/removed 正确的，但是由于某种原因，当模式关闭时，视频似乎仍在尝试重新播放，因为我得到控制台中的错误（它实际上无法播放，但当我有多个不同模式的视频时，我可以看出这是一个问题）

所以当模式关闭时自动播放标签被删除，但这个线程似乎仍然存在于视频。

如何才能完全停止视频，使其在模式关闭时不再发送任何请求？

所以我想我已经找到了问题所在。 iframe 在模式打开时加载到主页上，并且始终存在于后台。我尝试通过 remove() 删除 iframe，这有效并停止了错误，但是当模式重新打开时 iframe 不会第二次加载。

我需要一个解决方案来卸载 iframe，但仍然允许它在模式打开时重新加载。

Answer 1

我刚刚创建了两个视频网址，一个具有自动播放功能，一个不具有自动播放功能，然后在两者之间切换，它对我有用：

var video = "https://www.youtube.com/embed/ogfYd705cRs";
var autoVideo = video + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";

$(".custom-modal").on("hidden.bs.modal", function (e) {
  var iframe = $('#' + e.target.id).find("iframe");
  iframe.attr("src", video);
})

$(".custom-modal").on("show.bs.modal", function (e) {
  var iframe = $('#' + e.target.id).find("iframe");
  iframe.attr("src", autoVideo);
});

那么为什么不将视频 URL 存储在数据属性中？

<iframe class="modal-iframe" type="text/html" width="640" height="360" src="" data-video="https://www.youtube.com/embed/ogfYd705cRs" frameborder="0"></iframe>

然后在函数内获取视频 URLs :

$(".custom-modal").on("hidden.bs.modal", function (e) {
    var iframe = $('#' + e.target.id).find("iframe");
    var video = iframe.attr("data-video");
    iframe.attr("src", video);
})

$('.custom-modal').on('show.bs.modal', function (e) {
    var iframe = $('#' + e.target.id).find("iframe");
    var autoVideo = iframe.attr("data-video") + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
    iframe.attr("src", autoVideo);
});

对于每个模态的多个视频，将视频 URL 放在您用于打开模态的锚点上：

<a href="modals/somemodal.html" class="video-anchor" data-target="#modal1" data-video="https://www.youtube.com/embed/ogfYd705cRs" data-toggle="modal">

而不是监听模式打开监听锚点击和：

$(".video-anchor").click(function () {
  var modal = $(this).data("target");
  var video = $(this).attr("data-video");
  var autoVideo = video + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
  $(modal + ' iframe').attr('src', autoVideo);
});

当模态关闭时，我们设置的 src 并不重要，所以：

$(".custom-modal").on("hidden.bs.modal", function (e) {
  var iframe = $('#' + e.target.id).find("iframe");
  iframe.attr("src", "");
})

模式关闭时如何停止播放嵌入式 iframe youtube 视频？

How can I stop an embedded iframe youtube video from playing when a modal is closed?

javascript

embed

jquery