Question

我有一个Vimeo模式可以很好地工作 - 经过一些努力 - 我已经通过＆＃39; X＆＃39;关闭了模式来停止视频。按钮。但是，因为我把关闭功能放在＆＃39; X＆＃39;按钮，如果用户点击视频以关闭模式而不是使用按钮，则视频会继续播放。

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

<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

这是使用默认引导程序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);
});

祝你有美好的一天！

如何在解除Bootstrap模式时停止Vimeo视频？

4 个答案: