使用 vimeo api Froogaloop 简单暂停

Question

正在尝试调用 vimeo api 以在单击事件时暂停视频以隐藏它。并且，在再次单击以显示视频时，从暂停位置播放视频。

这里有各种各样的相关问题，我找不到简单的答案"how to pause"。我是 jquery 新手，无法理解 froogaloop 文档。

这是一个 FIDDLE，我当前的 jquery 脚本用于隐藏视频

$(document).click(function (event) {
    if (!$(event.target).hasClass('click')) {
        $('#video').hide();
    }      
});

当单击没有 "click" class 的元素时隐藏它。但视频在后台播放。 Froogaloop 在 fiddle 中加载。谢谢大家

Answer 1

froogaloop 可能会让人头疼。

让您入门的代码在这里： https://developer.vimeo.com/player/js-api#universal-with-froogaloop

我已经对其进行了调整以使其正常工作我认为您在这里的期望如何： https://jsfiddle.net/fLe5xs4v/

像这样设置：

var iframe = $('#video iframe')[0];
var player = $f(iframe);

请注意，如果您更改播放和暂停按钮中的文本，您将破坏此代码：

$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});

试一试，它至少能让你朝着正确的方向前进。祝你好运！

Answer 2

这是一个更新的 FIDDLE that makes pause/play work as I'd imagined. Click the image to play the video; click outside or on empty space () 暂停它；再次单击图像从暂停位置播放。简单，没有按钮，没有多余的 jquery 或 froogaloop 代码。

为了那些可能从中受益的人，把它放在这里。以及让我入门的 mbrrw +1。

var iframe = $('#video iframe')[0];
var player = $f(iframe);

$('.showvideo').on('click', function(){
    $('#video').show();
    $('.image').hide();
    player.api('play');
});

$(document).click(function (event) {
          if (!$(event.target).hasClass('click')) { //if what was clicked does not have the class 'click' (ie. any empty space)
    $('#video').hide();
    $('.image').show();
    player.api('pause');
          }
});

记得将 api=1 附加到 vimeo link。 url 必须是 https，而不是 http。

使用 vimeo api Froogaloop 简单暂停

Simple pause with vimeo api Froogaloop

javascript

jquery

vimeo

froogaloop

vimeo-api