jeudi 27 août 2020

Multiple youtube videos causes w.getDuration and postMessage errors

We are building an Ember webapp where users can add multiple Youtube videos to a page. The videos are Ember components 'wrapping' a Youtube iframe embed.

In order to comply with Youtube terms of service, we are trying to pause all other videos on a page whenever one starts playing, so that only one video can ever play at a time.
To do this, we have started using the YouTube Player API on the iframe embeds we were already using, following the documentation here: https://developers.google.com/youtube/iframe_api_reference

Having implemented that, we now listen for the onStateChange event in order to determine whenever a video starts playing and then use the postMessage method on all other YouTube iframes, in order to pause them. This works, except that since loading the Player API, we have been getting the following errors at seemingly random intervals:

Uncaught TypeError: w.getDuration is not a function
    at z (gtm.js?id=GTM-P9HMXHK:formatted:7573)
    at Object.onStateChange (gtm.js?id=GTM-P9HMXHK:formatted:7667)
    at gtm.js?id=GTM-P9HMXHK:formatted:7534
    at O.q.P (www-widgetapi.js:296)
    at Z.q.I (www-widgetapi.js:569)
    at Z.q.aa (www-widgetapi.js:593)
    at Qe.i (www-widgetapi.js:368)
    at Ce.g (www-widgetapi.js:352)

and

www-widgetapi.js:577 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin

When they do occur (which is not always), these errors break the functionality we built for pausing other videos.
The Ember components are instantiated independently of each other and each one checks for the existence of the YT script, loads it if necessary and makes a call to onYouTubeIframeAPIReady if it was called before, in order to create the player object for its own iframe. They are loosely based on this: https://github.com/oskarrough/ember-youtube/blob/master/addon/components/ember-youtube.js

Has anyone encountered these errors before in this context and is there a fix for them?




Aucun commentaire:

Enregistrer un commentaire