如何在Javascript中暂停Vimeo视频

How to pause Vimeo video in Javascript?

本文关键字：暂停 Vimeo 视频 Javascript      更新时间：2023-09-26

我会尽可能缩短这个时间，以便快速修复。

我有一个灯箱，打开一个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");
});
     
    
  
  });

有什么是我遗漏/做错的吗？

您正在点击处理程序中添加一个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");
});
相关文章：