如何在Javascript中暫停Vimeo視頻？

Question

我會盡可能縮短這個時間，以便我可以快速修復。

我有一個燈箱，打開一個vimeo視頻。屏幕右上方有一個按鈕可以移除燈箱，但是Vimeo視頻仍然在後臺播放，您可以聽到它，但看不到它。我需要能夠暫停VIMO視頻，同時隱藏燈箱。

這裏是我到目前爲止的代碼：

var lightbox = 
 
     '<div id="lightbox">' + 
 
     '<a><p id="click-to-close">Click to close</p></a>' + 
 
     '<div id="content">' + //insert clicked link's href into img src 
 
      ' <iframe id="video" src="https://player.vimeo.com/video/131429700?autoplay=1&title=0&byline=0&portrait=0?api=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>' + 
 
     '</div>' + 
 
     '</div>'; 
 

 

 

 
    $("#click-to-close").click(function() { 
 
    $('#lightbox').hide(); 
 

 
      var iframe = document.getElementById('video'); 
 

 
// $f == Froogaloop 
 
var player = $f(iframe); 
 

 

 
var pauseButton = document.getElementById("click-to-close"); 
 
pauseButton.addEventListener("click", function() { 
 
    player.api("pause"); 
 
}); 
 
     
 
    
 
    
 
    });

有什麼，我缺少/做錯了什麼？

Answer 1

您正在點擊處理程序中添加一個eventListener，它將隱藏您的按鈕。

var lightbox = 
    '<div id="lightbox">' + 
    '<a><p id="click-to-close">Click to close</p></a>' + 
    '<div id="content">' + 
    ' <iframe id="video" src="https://player.vimeo.com/video/131429700?autoplay=1&title=0&byline=0&portrait=0?api=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>' + 
    '</div>' + 
    '</div>'; 



$("#click-to-close").click(function() { 
    // here you hide the pauseButton's container 
    $('#lightbox').hide(); 

    var iframe = document.getElementById('video'); 
    // $f == Froogaloop 
    var player = $f(iframe); 

    var pauseButton = document.getElementById("click-to-close"); 
    // it is now hidden, we can't access it anymore... 
    pauseButton.addEventListener("click", function() { 
    player.api("pause"); 
    }); 
}); 

所以，你有兩種解決方案：

• 追加#lightbox元素，這似乎很奇怪，外面的按鈕，因爲隱藏的視頻仍然會被打，
• 直接調用player.api("pause");在第一次點擊處理者

。

$("#click-to-close").click(function() { 
    $('#lightbox').hide(); 
    var iframe = document.getElementById('video'); 
    // $f == Froogaloop 
    var player = $f(iframe); 
    player.api("pause"); 
});