2015-11-08 116 views
2

我会尽可能缩短这个时间,以便我可以快速修复。如何在Javascript中暂停Vimeo视频?

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

有什么,我缺少/做错了什么?

回答

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

$ F在这种情况下 –

+0

@RussellStrauss $ F没有定义的定义,这是frogaloop功能有问题的评论说。 – Kaiido

+0

@Russell Strauss您需要为'$ f'实例添加'froogaloop2.min.js'。 –