如何在Javascript中暂停Vimeo视频？

Question

如何在Javascript中暂停Vimeo视频？

4

我会尽可能简短地说明问题，以便快速解决。

我有一个在 lightbox 中打开 Vimeo 视频的功能。屏幕右上角有一个按钮可以关闭 lightbox，但是此时 Vimeo 视频仍在后台播放，并且可以听到声音，但看不到视频画面。我需要能够暂停 Vimeo 视频同时隐藏 lightbox。

以下是目前我所拥有的代码：

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

我是否忽略或做错了什么？

- HowToGaming

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kaiido · Accepted Answer

您正在单击处理程序中添加事件侦听器，将隐藏您的按钮。

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