Pause Vimeo universal embed when hidden using jQuery

亡梦爱人 提交于 2019-12-05 03:07:21

You need to add from one of the froogaloop libraries.

JS

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

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

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>

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

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');
    });
});
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!