代码之家 › 专栏 › 技术社区 › jjmcc

当模式关闭时,如何阻止嵌入的iframe youtube视频播放?

embed jquery javascript

jjmcc · 技术社区 · 6 年前

我已经尝试了不同的解决方案,从不同的职位,但似乎没有工作正常。

<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>

开幕式/闭幕式

$(".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

所以当模式关闭时,autoplay标签被移除,但是这个线程似乎仍然存在于视频中。

如何完全停止视频,使其在模式关闭时不再发送任何请求?

所以我想我找到了问题所在。当打开模式时,iframe被加载到主页面上,并且它总是出现在后台。我尝试过移除iframe via remove() 这样可以工作并停止错误,但是当模式重新打开时,iframe不会再次加载。

1 回复 | 直到 6 年前

r3zaxd1 6 年前

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>

$(".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", "");
})