16

I wrote an AngularJS directive for vimeo videos with built in play/pause functionality using their froogaloop library.

It's works great! The only issue is that I get the following error when the page first loads.

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://player.vimeo.com') does not match the recipient window's origin

Am I initializing the froogaloop object wrong in the directive? Any suggestions would be most appreciated.

You can check it out the plunker here: http://plnkr.co/edit/GKWNk3LhX0MR3lhpfqyA

npatten
  • 171
  • 1
  • 1
  • 6
  • 4
    Sadly it's not something you can do anything about. Vimeo is attempting to communicate with its parent window with `postMessage(msg, 'http://vimeo.com/')` (note it's **not** using `(postMessage(msg, '*')`) and therefore that `postMessage` will only make sense to the parent window, not to your application. As such, it's only delivered when the iframe is embedded on Vimeo.com. – Wildhoney Feb 14 '14 at 14:33
  • 1
    May thy humble self share the directive? Looking for a implementation myself! nvm, didn't see tha plnkr – Are Almaas Feb 26 '14 at 07:28

2 Answers2

6

I recommend to execute the code in the onLoad event from <iframe>. Then you are ensured that the code will execute when iframe is ready for receiving messages.

There are plenty ways to do it:

  • You can use jQuery if you already have it in your project: $('iframe').load(callback) or
  • write an EventListener: iframe_element.addEventListener('load', callback) or
  • use plain onload callback: iframe_element.onload = callback.

Where callback is the method which uses Froogaloop.

But you have to know that some of those solutions might have some drawbacks on some old/MS browsers browsers.

Ravbaker
  • 1,780
  • 1
  • 13
  • 11
2

For me it looks like angularjs triggers Player API before actually rendering the iframe on the page. At least if I postpone scope.$watch it works fine:

$timeout(function() {
    scope.$watch('controlBoolean', function() {/* your code goes here */});
});
Yauheni Leichanok
  • 1,759
  • 1
  • 21
  • 30