41

我对 javascript 非常陌生，并尝试使用 Twitter 引导程序来快速启动和运行一个漂亮的网站。我知道这与 jquery 有关，但是当我按下关闭按钮或关闭图标时，我不确定如何停止我的视频。

有人可以解释一下如何让我的视频停止播放，因为即使我关闭窗口，我仍然可以在后台听到它。 

<!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="img/play.png"></a>

<!-- Modal -->
  <div id="myModal" class="modal hide fade" tabindex="-1" role=labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria>×</button>
      <h3 id="myModalLabel">I am the header</h3>
    </div>
    <div class="modal-body">
      <p><iframe width="100%" height="315" src="http:com/embed/662KGcqjT5Q" frameborder="0" allowfullscreen></iframe></p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
4

22 回答 22

82

我知道我迟到了 2 年多，但从那时起，一些事情发生了变化，使用 B3 开箱即用的新方法是：

$("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});

玩得开心！

于 2014-07-31T22:23:19.040 回答
42

有一种很好的正确方法 - 请参阅此帖子的已批准答案中的评论。

虽然我自己第一次无法让它工作，而且很匆忙，所以我做了一个相当可怕的 hacky 代码来解决这个问题。

此代码段“刷新”嵌入 iframe 的 src，使其重新加载：

jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {
        jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));
});
于 2012-12-10T11:14:51.010 回答
19

如果有人仍然有问题，试试这个，它对我有用：

$(document).ready(function(){
    $('.modal').each(function(){
            var src = $(this).find('iframe').attr('src');

        $(this).on('click', function(){

            $(this).find('iframe').attr('src', '');
            $(this).find('iframe').attr('src', src);

        });
    });
});
于 2013-11-15T15:07:33.737 回答
13

这是我发现的一种简单方法，用于在模态窗口中播放视频，然后在关闭时停止播放。

当模态显示时，使用 .html 将带有视频的 iFrame 加载到模态体中，然后在隐藏时将模态体替换为空。

$('#myModal').on('show', function () { 
 $('div.modal-body').html('YouTube iFrame goes here');  
});
$('#myModal').on('hide', function () {
 $('div.modal-body').html('');
});

这是一个jsfiddle示例：

http://jsfiddle.net/WrrM3/87/

于 2013-01-30T17:28:23.680 回答
13

在这里，我概括了@guillesalazar 的回答。

这将重置任何引导模式中的任何 iFrame（当模式关闭时）：

$(function(){
  $("body").on('hidden.bs.modal', function (e) {
    var $iframes = $(e.target).find("iframe");
    $iframes.each(function(index, iframe){
      $(iframe).attr("src", $(iframe).attr("src"));
    });
  });
});

将此添加到您的布局中，您就可以设置了。

更新：为具有多个 iFrame 的模式修改了代码。

于 2015-06-26T17:21:02.140 回答
6

您应该先清空 iframe src，然后再重新设置。

所以我的工作答案：

$('#myModal').on('hidden.bs.modal', function () {
    var src = $(this).find('iframe').attr('src');
    $(this).find('iframe').attr('src', '');
    $(this).find('iframe').attr('src', src);
});

2014 年 10 月。对于 Bootstrap 3。

于 2014-10-09T14:43:38.680 回答
4

这是我的解决方案，它使用引导事件调用解决了以下问题：

  1. 显示模态时自动播放电影
  2. 隐藏模式时停止电影

模态中的HTML轮播，第一个活动项是 iframe 视频

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <div class="fill">
                                <iframe id="videoIframe" width="100%" height="100%" src="https://www.youtube.com/embed/UVAjm8b7YFg?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

显示模态时Javascript自动播放，然后重置 URL 并再次将其应用于 iframe src

$('#myModal').on('show.bs.modal', function() {
    $("#videoIframe")[0].src += "&autoplay=1";
});
$('#myModal').on('hidden.bs.modal', function(e) {
    var rawVideoURL = $("#videoIframe")[0].src;
    rawVideoURL = rawVideoURL.replace("&autoplay=1", "");
    $("#videoIframe")[0].src = rawVideoURL;
});
于 2016-07-21T16:26:31.190 回答
2

这个完美地做到了：

$("#myModal").on("hidden.bs.modal", function(t) {
   var o = $(t.target).find("iframe");
   o.each(function(t, o) {
      $(o).attr("src", $(o).attr("src"))
   });
});

但是，如果您希望在模态打开/关闭时启动它，请使用以下代码：

但请确保添加enablejsapi=1您的 src，例如：

<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_CODE?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>


function playStopVideo() {
    var youtubeFunc ='';
    var outerDiv = $("#myModal");
    var youtubeIframe = outerDiv.find("iframe")[0].contentWindow;
    outerDiv.on('hidden.bs.modal', function (e) {
        youtubeFunc = 'stopVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
    outerDiv.on('shown.bs.modal', function (e) {
        youtubeFunc = 'playVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
}

playStopVideo();
于 2017-06-08T23:32:28.050 回答
2

比所有这些答案更简单的方法就是替换整个 src。这适用于所有模式，您可以根据需要调整 iframe 类。

$('.modal').on('hidden.bs.modal', function(e) {
    var closestIframe = $(e.currentTarget).find('iframe');
    var rawVideoURL = $("iframe")[0].src;

    closestIframe[0].src = "";
    closestIframe[0].src = rawVideoURL;
  });

于 2018-01-12T05:16:53.317 回答
2

hide.bs.modal在事件的引导模式中重新加载任何 iframe 。

重置后修复 iframe 渲染的setTimeout延迟。src

$('.modal').on('hidden.bs.modal', function (event){
    let iframes = event.target.getElementsByTagName('iframe');
    for (let i = 0; i < iframes.length; i++) {
        let src_tmp = iframes[i].src;
        iframes[i].src = '';
        setTimeout(() => {
            iframes[i].src = src_tmp;
        }, 100);
    }
});
于 2020-12-25T05:58:03.473 回答
1

我结合使用Ruslanas Balčiūnas和Nathan McFarland的答案来编写适合我的代码。

$('#myModal').on('hide',function(){
   $('.modal-body iframe').attr('src','');
});

所以基本上这会在触发关闭模式事件时将src属性设置为空。iframe短而甜。

于 2014-03-19T15:05:41.253 回答
1

我对这个适用于Bootstrap 3现代 YouTubeembed格式的解决方案如下。

假设您的视频嵌入在一个标准Bootstrap 3 Modal中id="#video-modal"，这个简单的 Javascript 就可以完成这项工作。

$(document).ready(function(){
  $("#video-modal").on('hide.bs.modal', function(evt){
    var player = $(evt.target).find('iframe'),
        vidSrc = player.prop('src');
    player.prop('src', ''); // to force it to pause
    player.prop('src', vidSrc);
  });
});

我已经看到了针对此问题的建议解决方案YouTube API，涉及https使用工作，你会得到“电视机到死频道”的效果，而不是你的视频。no-cookies

我已经在我可以使用的每个浏览器上测试了上述内容，并且它工作得非常可靠。

于 2014-05-29T08:12:28.420 回答
1

扩展 Guille 上面的答案，这是一个插入式功能，可与 Bootstrap 3（截至 8 月 14 日的最新版本的 youtube）一起使用，并适用 于一个页面中的多个视频/模态。

$(".modal").on('hidden.bs.modal', function(e) {
    $iframe = $(this).find( "iframe" );
    $iframe.attr("src", $iframe.attr("src"));
});
于 2014-08-26T11:30:36.117 回答
1

有一个包含许多视频的模式。@guillesalazar 更新了代码以关闭模式中的多个视频。

$("#myModal").on('hidden.bs.modal', function (e) {
            $("#myModal iframe").each(function () {
                $(this).attr("src", '');
            });
        });
于 2015-04-20T18:34:42.253 回答
1

7年后，我们仍然需要解决这个问题。

我们找到了修复它的最佳方法（灵感来自RobCalvert123答案）

  jQuery(".modal-backdrop, .modal.open .close,.modal.open .btn").live("click", function() {  
         // Get iframe opened 
         var iframe_open = jQuery('.modal.open');     
         // Get src from opened iframe 
         var src = iframe_open.attr('src');
         // replace src by src to stop it that's the tips
        iframe_open.attr("src", src);
});
于 2019-05-31T15:06:15.873 回答
1

1. 在您的页面上嵌入 Youtube (html)

将 Youtube div 容器添加到您的网站：

<div id="ytplayer">This will be replaced with the Youtube iFrame</div>

添加 Youtube Javascript Api (iFrame)

<script>
    // Ads Youtube JS API
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


    // This function creates an <iframe> (and YouTube player) after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: 'ncif63mSZl4',
        WMode: 'transparent',
        wmode: 'opaque',
        playerVars: {
            'autoplay': 0,
            'controls': 0,
            'autohide':1,
            'rel':0,
            'showinfo': 0,
            'modestbranding': 1,
        },
      });
    }

   function stopVideo() {
    player.stopVideo();
   }
    
   function pauseVideo() {
    player.pauseVideo();
   }
    
   function playVideo(){
    player.playVideo();
   }
</script>

使用 jQuery 进行控制（引导模式）


  // Open Modal and start Playing Youtube Video
  $("#myModalTrigger").click(function(){
    $("#video-modal").modal(); // opens up the Modal
    playVideo(); // Starts playing Video
  });

  // Stop Player on Modal hide
  $('#video-modal').on('hide.bs.modal', function (e) {
    stopVideo(); // stop player
  });
于 2020-07-20T11:38:31.263 回答
0 
$('#myModal').on('hide', function () {
    $('#video_player')[0].stopVideo();
})
于 2012-12-10T14:49:50.357 回答
0

@guillesalazaar 的回答只是我修复的前半部分，所以我觉得有必要分享我的情况，以防将来对某人有所帮助。我也有一个嵌入的 youtube 视频，但我将我的视频设置为在使用autoplay=1. 为了解决页面加载时的自动播放问题，我将我的 youtube url 存储在一个变量中，该变量使用点击处理程序设置 iframe 源。为了解决这个问题，我只是删除了属性源链接：

我的 URL 来触发模态窗口：

   <div id="movieClick" class="text-center winner"> 
<a href="#" data-toggle="modal" data-keyboard="true" data-target="#movie">
    </div>

我隐藏的模态窗口 div：

<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
    <div class="modal-dialog">

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">They Live (1988)</h4>
    </div>
     <div class="modal-body">
        <iframe id="onscreen" width="100%" height="460px" src="" frameborder="0" allowfullscreen></iframe>

      </div>
</div>

</div>
</div>

我的 JS：

$("#movieClick").click(function(){
var theLink  = "https://www.youtube.com/embed/Wp_K8prLfso?autoplay=1&rel=0";
document.getElementById("onscreen").src = theLink;
});


// really annoying to play in the Background...this disables the link
$("#movie").on('hidden.bs.modal', function (e) {
    $("#movie iframe").attr("src", '');
});
于 2016-04-14T10:25:59.057 回答
0 
 //stop youtube video on modal close
$('.modal').on('hidden.bs.modal', function () {
    var iframVideo = $('.modal').find('iframe');
    $(iframVideo).attr("src", $(iframVideo).attr("src"));
});
于 2019-02-12T11:42:38.453 回答
0

我使用HTML data-* 属性处理 2 个或更多 Youtube 视频的解决方案。当模式打开和关闭时，视频会自动播放并停止。

<button data-url="https://www.youtube.com/embed/C0DPdy98e4c" data-toggle="modal" data-target="#mymodal">Video 1</button>
<button data-url="https://www.youtube.com/embed/ScMzIvxBSi4" data-toggle="modal" data-target="#mymodal">Video 2</button>

<!-- Modal -->
<div id="mymodal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

$('.modal').on('show.bs.modal', function (event) {
  $(this).find('iframe').attr("src", $(event.relatedTarget).data('url') );
});

$('.modal').on('hidden.bs.modal', function (e) {
    $(this).find('iframe').attr("src", "");
});

这是一个 Codepen 演示： https ://codepen.io/danielblazquez/pen/oOxRJq

于 2019-04-05T12:53:45.427 回答
0

对于角度或动态 html，或者如果我们有多个 iframe，则使用如下

$("#myModal").on('hidden.bs.modal', function (e) {
  $("#myModal iframe").each(function(){
    $(this).attr("src", $(this).attr("src"));
  });
});
于 2019-05-01T15:53:07.957 回答
0

如果您有多个带有许多视频的模态，例如，假设您在轮播上的每张幻灯片上都有一个模态，您需要更动态的东西来关闭/停止可见幻灯片中的视频，而不是弄乱所有其他模态，使用这个：

$(".modal").on('hidden.bs.modal', function (e) {
      $(this).find("iframe").attr("src", $(this).find("iframe").attr("src"));
  });
于 2020-01-11T12:31:41.527 回答