我会尽量缩短它,以便我可以快速修复。
我有一个灯箱,可以打开一个 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");
});
关于javascript - 如何在 Javascript 中暂停 Vimeo 视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33593360/