當Bootstrap模式被解除時如何停止Vimeo視頻？

Question

我有一個奇妙的Vimeo模式，經過一番努力，當模式通過'X'按鈕關閉時，我得到視頻停止。但是，由於我將關閉功能放在'X'按鈕上，如果用戶點擊遠離視頻關閉模式而不是使用按鈕，則視頻會繼續播放。

這裏就是我所說的stopVideo()函數的onclick的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

大量的試驗和錯誤後，改變的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 2

下面是使用默認的引導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 3

，對我工作的一種解決方法是重新加載模式的內容：

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