如何在Javascript中暂停Vimeo视频？ [英] How to pause Vimeo video in Javascript?

问题描述

我会尽可能缩短这一点，这样我就可以快速修复。

I'm gonna make this as short as possible so that I can get a quick fix.

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

I have a lightbox that opens up with a vimeo video. There is a button in the top right of the screen to remove the lightbox, however the vimeo video still plays in the background and you can hear it, whilst not seeing it. I need to be able to pause the vimeo video while also hiding the lightbox.

这是我到目前为止的代码：

Here is the code I have so far:

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

我有什么遗漏/做错了吗？

Is there anything that I am missing/doing wrong?

推荐答案

您在点击处理程序中添加了一个eventListener，它将隐藏您的按钮。

You are adding an eventListener in the click handler which will hide your button.

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

所以你有两个解决方案：

So you have two solutions :

• 将您的按钮添加到 #lightbox 元素之外，这看起来很奇怪，因为隐藏的视频仍然会播放，


• 直接在第一个点击处理程序中调用 player.api（暂停）;

• append your button outside the #lightbox element, which seems odd, since the hidden video will still be playing,
• directly call player.api("pause"); in the first click handler

。

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

这篇关于如何在Javascript中暂停Vimeo视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！