Bootstrap 模态被关闭时如何停止 Vimeo 视频？

Question

我有一个 Vimeo 模态，效果非常好，经过一些努力后，我已经通过 'X' 按钮关闭模态时停止播放视频。但是，由于我将关闭功能放在 'X' 按钮上，如果用户点击视频以外的地方关闭模式而不是使用按钮，视频会继续播放。

这里是 HTML 我用 onclick 调用 stopVideo() 函数的地方：

<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="stopVideo()">
      <span aria-hidden="true">&times;</span>
   </button>
</div>

这里是停止视频的 Javascript 函数：

<script>
 function stopVideo(){
     var $frame = $('iframe#nofocusvideo');

    // saves the current iframe source
    var vidsrc = $frame.attr('src');

    // sets the source to nothing, stopping the video
    $frame.attr('src',''); 

    // sets it back to the correct link so that it reloads immediately on the next window open
    $frame.attr('src', vidsrc);
}
</script>

那么，我该如何更改该功能以使其不应用于特定的关闭按钮，而是应用于模式失去焦点的任何情况，例如点击离开视频？

我是新手，请放过我。提前致谢！

编辑 1：

我已将脚本更改为以下内容：

<script>
    function stopVideo(){
     var $frame = $('iframe#nofocusvideo');

    // saves the current iframe source
    var vidsrc = $frame.attr('src');

    // sets the source to nothing, stopping the video
    $frame.attr('src',''); 

    // sets it back to the correct link so that it reloads immediately on the next window open
    $frame.attr('src', vidsrc);
    }

    $('#promo-video').on('hidden.bs.modal', function (e) {
        stopVideo();
    })
</script>

未调用 stopVideo() 函数。知道我做错了什么吗？

编辑 2：这是相关模态的代码：

<!-- VIDEO MODAL -->
    <div class="modal fade" id="promo-video" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="stopVideo()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-video">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe id="nofocusvideo" src="https://player.vimeo.com/video/180565514?api=1&player_id=vimeoplayer" name="vimeoplayer" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- End Video Modal -->

Answer 1

这是使用默认 bootstrap ID 的工作代码。不太清楚为什么你的不起作用。

function stopVideo() {
  var $frame = $('iframe#nofocusvideo');

  // saves the current iframe source
  var vidsrc = $frame.attr('src');

  // sets the source to nothing, stopping the video
  $frame.attr('src', '');

  // sets it back to the correct link so that it reloads immediately on the next window open
  $frame.attr('src', vidsrc);
}

$('#myModal').on('hidden.bs.modal', function(e) {
  stopVideo();
})

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <iframe id="nofocusvideo" src="https://player.vimeo.com/video/182738685" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 2

经过反复试验，将 javascript 更改为以下解决了我的问题：

<script>
       ( function($) {



function iframeModalOpen(){

        $('.modalButton').on('click', function(e) {
            var src = $(this).attr('data-src');
            var width = $(this).attr('data-width') || 640; 
            var height = $(this).attr('data-height') || 360;

            var allowfullscreen = $(this).attr('data-video-fullscreen');

            $("#promo-video iframe").attr({
                'src': src,
                'height': height,
                'width': width,
                'allowfullscreen':''
            });
        });


        $('#promo-video').on('hidden.bs.modal', function(){
            $(this).find('iframe').html("");
            $(this).find('iframe').attr("src", "");
        });
    }

  $(document).ready(function(){
        iframeModalOpen();
  });

  } ) ( jQuery );
    </script>

Answer 3

对我有用的解决方案是重新加载模态内容：

    $("#modal-video").on("hidden.bs.modal", function () {
        var url = $('#video-frame').attr('src');
        $('#video-frame').attr('src', '');
        $('#video-frame').attr('src', url);
    });

Answer 4

我有一系列模态的 vimeo 播放器，最后想出了一个动态的方式来在关闭模态后停止视频。说真的，bootstrap/vimeo 应该将其添加为默认值！！

  $('.modal').on('hidden.bs.modal', function () {
var $this = $(this);
//get iframe on click
 var vidsrc_frame = $this.find("iframe");
var vidsrc_src = vidsrc_frame.attr('src');
 console.log(`videosrc=` + vidsrc_src); 
vidsrc_frame.attr('src', '');
vidsrc_frame.attr('src', vidsrc_src);
});

祝你有愉快的一天！

Answer 5

这个选项更好，更动态

$(function(){
    $('.modal, .close').click(function(){
        $("iframe").each(function() {
            var src= $(this).attr('src');
            $(this).attr('src',src);
        });
    });
});

Bootstrap 模态被关闭时如何停止 Vimeo 视频？

How to stop Vimeo video when Bootstrap modal is dismissed?

javascript

jquery

vimeo

twitter-bootstrap