Thomas Smestad

Thomas Smestad Plus

Hi!
I'm currently making a site for a client, and they want to use Vimeo for their video hosting. Further on they want the videos to be in a coda-slider-style presentation.

I've set up things so that the coda-slider works, and I use the new Universal embed through oEmbed to put the video on the site.

Everything up until now works great, but I've run into a bit of a usability issue. If the user starts one video, and then decides to pull up another video, the first one should stop.

I've tried using froogaloop, but I get this error: Unable to post message to player.vimeo.com. Recipient has origin .

Can anybody help me with this?

Joseph Schmitt

Joseph Schmitt Staff

If you're using a webkit browser (Safari or Chrome) that error is actually coming from the Webkit Inspector trying to access the iframe (the Webkit Inspector is actually written in HTML and Javascript).

The thing to make sure is that you can't call any of the api or addEvent methods on the iframe until the player has finished loading. As per the example, you need to add the "onLoad" event first and then execute your code inside of that handler.

Thomas Smestad

Thomas Smestad Plus

I have all my JavaScript inside $(document).ready(), but I still can't get it to work.

$('iframe').each(function(index, iframe){
iframe.addEvent('onPlay', alert('Hello world ' + $(iframe).attr('id')));
});

This code will cause the alert to fire once on load, but not on play. If i change onPlay to onLoad it will fire three times, each with a unique id, just as expected.

Joseph Schmitt

Joseph Schmitt Staff

The onLoad event for the player is separate from the document's load event, so I would still put all your api calls in there. The onLoad event fires when the actual player finishes loading, which will happens several seconds after the page finishes loading. Glad you got it to work.

Thomas Smestad

Thomas Smestad Plus

html/php:

(Couldn't post the HTML)

This part works, and it also gives a unique ID for all the iframes.

This is what I use to get a single video (there's probably better ways to do this, but I haven't had the time to refactor):

function get_vimeo_xml($vimeoid) {
$width = 760;
$height = 430;
$byline = 'false';
$title = 'false';
$portrait = 'false';
$iframe = 'true';
$xhtml = 'true';
$api = 'true';

$url = 'vimeo.com/api/oembed.xml?url=http://vimeo.com/'.$vimeoid.'&width='.$width.'&height='.$height.'&byline='.$byline.'&title='.$title.'&portrait='.$portrait.'&iframe='.$iframe.'&xhtml='.$xhtml.'&api='.$api;
$xml = new SimpleXMLElement(download_page($url));
return $xml;
}

I've deleted the JavaScript part, as it didn't work, but it was pretty much just the examples:

var iframe = document.getElementById("vimeo1");
iframe.api("api_play");

Marc Kremers

Marc Kremers Plus

Joseph, please do us all a favor and put that amazing example on Froogaloops github! You know how long it took me just to find an example of this? Thanks a bunch.

Marc Kremers

Marc Kremers Plus

It just totally makes sense to have a decent example of the script within the scripts github. I wrote a post about this in the Features Request forum an hour ago. I think Vimeo's scattered, messy help docs let the service down. And you know, maybe that little snippet in the readme file suffices for developers, but it doesn't suffice for most of your users who are more focussed on content.

Thomas Smestad

Thomas Smestad Plus

I got it to work!

Thank you for your help Joseph! It's wonderful to get the help of the author when I can't make sense of things myself.

Here's the code I got to work:

$('.vimeothumblink').click(function () {
$('iframe').each(function () {
$(this).get(0).api( 'api_pause');
});
});

Even though I deal with 'this', which is not an array if I understand correctly, I had to have '.get(0)' or it wouldn't work.

STREETFILMS

STREETFILMS PRO

Hi Joseph,
Your live hosted version works fine for me, but when I wget the file and run it locally, it doesn't work. The videos are there but none of the api calls produce any results. I am having the same problem with my own app. Any thoughts?

Chris

Joseph Schmitt

Joseph Schmitt Staff

I'm guessing that the iframe security model doesn't like the fact that the referrer URL is a local file instead of an http. Try setting up a virtual server or hitting the file through your localhost instead of opening up the file directly in your browser.

STREETFILMS

STREETFILMS PRO

nice one... yes, I hit it through localhost and it worked! Thanks.

Thomas Smestad

Thomas Smestad Plus

I've reworked the code, so now it uses the onLoad. For the player, and not the document. However, a new problem has presented itself. Whenever I use an iPad to browse my site, the froogaloop api calls are ignored. It works as it should on every other browser, except Apple iOS.

Do you have any clue to why it doesn't work?

Another problem I have is when the iPad loads the video it replaces the iframe in some way and then floats over my other content. It is very visible because I use a coda-slider to change videos, so when it shifts to the side, instead of hiding behind the menu, it floats on top.

Joseph Schmitt

Joseph Schmitt Staff

The API methods only work for the Flash player at the moment. We're currently working on providing full support for the API for the HTML and iPad/iPhone players and that should be out shortly.

Cheers,
Joe

On Creativity

On Creativity

Hi - I have the player working as well, but I still get "unsafe attempt to access frame" errors as mentioned above, even though everything is encased in the froogaloop onready event lifted from the example. I made a JS fiddle so you can see what's going on - how do I resolve this?

jsfiddle.net/heaversm/sMX6f/

Tony Xiao

Tony Xiao

+1. Need a good example on how to resolve this.

This conversation is missing your voice. Please join Vimeo or log in.