如何在 Javascript 中暂停 Vimeo 视频？

Question

我会尽量缩短这段时间，以便快速修复。

我有一个带有 vimeo 视频的灯箱。屏幕右上角有一个用于移除灯箱的按钮，但 vimeo 视频仍在后台播放，您可以听到它，但看不到它。我需要能够在隐藏灯箱的同时暂停 vimeo 视频。

这是我目前的代码：

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