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

发布于 2024-10-31 06:28:53 字数 660 浏览 5 评论 0原文

我的页面上隐藏了一个 Vimeo 视频（通过通用嵌入 iframe）。单击链接会将其淡入，单击视频外部（灯箱样式）会将其淡出并隐藏 - 但视频会继续播放。我在 Vimeo 的 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);
});

原文

I have a Vimeo video (via universal embed iframe) hidden on my page. Clicking a link fades it in, and clicking outside of the video (lightbox-style) fades it out and hides it - but the video keeps playing. I read on Vimeo's API that you can use JSON objects to pause the video, but I don't understand what they're saying.

HTML:

<img id="show_tide" class="vid" src"#">
<i<iframe id="tide" class="vim" src="http://player.vimeo.com/video/1747304?portrait=0&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);
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

贱贱哒 2024-11-07 06:28:53

您需要从 froogaloop 库之一进行添加。

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

简单得令人烦恼。这是jsfiddle.net 上的示例。

You need to add from one of the froogaloop libraries.

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

Annoyingly simple. Here's an example on jsfiddle.net.

回复收藏 0 原文

Spring初心 2024-11-07 06:28:53

我想添加一个像这样的播放/暂停按钮，而不使用 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>

I wanted to add a play/pause button like this without using jquery or froogaloop. I don't know why but, I hate including a library when I don't have to. Especially for simple things like this.

Here's what I came up with (I'm just posting this for other people who are searching) :

<!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>

回复收藏 0 原文

挽清梦 2024-11-07 06:28:53

这是一种使用 froogaloop 库从外部 HTML 元素暂停 Vimeo 视频的简单方法，对我有用：

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

Here's a simple way to pause a Vimeo video from an external HTML element that worked for me, using the froogaloop libray:

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

回复收藏 0 原文

快乐很简单 2024-11-07 06:28:53

我参加聚会有点晚了，但我必须加载 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');
    });
});

I'm a little late to the party, but I had to load froogaloop, jquery, and the Vimeo API also.

be sure to append ?api=1&player_id='frame' to the end of your embedded video link

My code looked something like this after

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

回复收藏 0 原文

~没有更多了~