如何在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"); 
});