Stop a Vimeo Video with Jquery

Question

I need to stop a Vimeo video embedded with new oembed api (universal player) but when I try to add an event I get this error:

Uncaught TypeError: Object #<an HTMLIFrameElement> has no method 'addEvent'

But I don't why I get this error, I added jquery and the frogaloop api, also I added ids to the iframes, but it still doesn't work: :(

The full code is here:

http://tv.bisaccia.info

Answer 1

You can't.

• There's no DOM addEvent method.
• You don't have cross-domain access to Vimeo, so you are not permitted to have JavaScript interface with the iframe's document or abstract view.

If you wanted to interface with Vimeo via JavaScript, you would have to get them to implement a postMessage API that also accepts your domain.

Answer 2

Eli, please edit your post. As Joe said, you are partially misinformed. While postMessage is needed for cross-domain communication, it is implemented through a DOM method added by a call to "Froogaloop.init();"

is_embed_iframe = _this.iframe_pattern.test(cur_frame.getAttribute('src')); 

if (is_embed_iframe) {
        cur_frame.api = _that.api;
        cur_frame.get = _that.get;
        cur_frame.addEvent = _that.addEvent;
    }

Note: you will need to grab froogaloop.js (or the min variant) from the Vimeo site.

Be sure the iFrame "src" is set prior to calling init(), otherwise froogaloop will do nothing.

Answer 3

As per Mike's suggestion, invoking:

Froogaloop.init();

Does make the control API work. In my case:

<iframe id="player_1" src="http://player.vimeo.com/video/26859570?js_api=1&amp;js_swf_id=player_1&amp;title=0&amp;byline=0&amp;portrait=0" width="620" height="354" frameborder="0"></iframe>
<script>
    $(document).ready(function() {
        Froogaloop.init();
        $("#player_1").moogaloop({
            load: function(element) {
                $("#segment1").click(function() { element.moogaloop('seekTo', "7"); });
            }
        });
    });
</script>

Weird... Moogaloop's author demo page does work without the init() call. Anyway, worked for me.

Thanks for your time!

Answer 4

This is not the correct answer, but may work for your situation as it did for mine. I simply wanted to stop my Vimeo from playing when I closed its containing DOM element. I was collapsing its container and that hid it visually but the audio continued to play and use browser resources unnecessarily.

What I do now is simply store the iframe in a variable, remove it from the DOM, then replace it immediately. I have NOT tested across browsers, only the latest version of Chrome and Safari Mobile.

var container = $("#VimeoContainer");
var iframe = container.find("iframe");
iframe.remove();
container.append(iframe);

Again, Froogaloop is really the way to go, however I've had issues with it in the past so for this situation I was looking for something simple. Obviously you could do this without JQuery with the same results.