Question

我的页面上隐藏了一个Vimeo视频（通过通用嵌入式iframe）。单击链接将其淡入，然后单击视频外部（灯箱样式）将其淡出并隐藏它 - 但视频会继续播放。我在Vimeo's API上读到你可以使用JSON对象暂停视频，但我不明白他们在说什么。

HTML：

<img id="show_tide" class="vid" src"#">
<i<iframe id="tide" class="vim" src="http://player.vimeo.com/video/1747304?portrait=0&amp;color=ffffffapi=1" width="726" height="409" frameborder="0"></iframe>

JavaScript的：

$('#underlay').click(function() {
    //pause VISIBLE (there are multiple) Vimeo video via API
    $('.vim, #underlay').fadeOut(400);
});

Answer 1

您需要从其中一个froogaloop libraries添加。

<强> JS

player=$f(document.getElementById('tide'));// you can use jquery too: $('#tide')[0] 
player.api('pause');

非常简单。这是一个example on jsfiddle.net。

Answer 2

我想在不使用jquery或froogaloop的情况下添加这样的播放/暂停按钮。我不知道为什么，但是，当我不需要时，我讨厌包括一个图书馆。特别是对于像这样的简单事情。

以下是我提出的内容（我只是将其发布给正在搜索的其他人）：

<!DOCTYPE HTML>
<html>
<head>
    <title>Vimeo Test</title>
    <script language="JavaScript">
    var iFram, url;
    function startitup(){
        iFram = document.getElementById('theClip');
        url = iFram.src.split('?')[0];
    }
    function postIt(action, value) {
        var data = { method: action };
        if (value) {
            data.value = value;
        }
        if(url !== undefined){
            iFram.contentWindow.postMessage(JSON.stringify(data), url);
        }
    }
</script>
</head>
<body onload="startitup();">
<iframe id="theClip" src="http://player.vimeo.com/video/27855315?api=1" width="400"     height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>    </iframe>
<p><button onclick="postIt('play');">Play</button> <button     onclick="postIt('pause');">Pause</button></p>
</body>
</html>

Answer 3

这是一种使用froogaloop libray暂停来自外部HTML元素的Vimeo视频的简单方法：

var iframe = $('.video')[0];
var player = $f(iframe);
$('.button').bind('click', function() {
    player.api('pause');
});

Answer 4

我参加派对有点晚了，但我还要加载froogaloop，jquery和Vimeo API。

请务必将?api=1&player_id='frame'附加到嵌入式视频链接的末尾

我的代码在

之后看起来像这样

<iframe id="frame" src='http://player.vimeo.com/video/199114019?api=1&player_id='frame''></iframe>

$(document).ready(function() {
    $('.nameofyourclass').click(function() {
      $f($('#frame')[0]).api('pause');
    });
});

使用jQuery隐藏时暂停Vimeo通用嵌入

4 个答案: