多个youtube视频导致w.getDuration和postMessage错误

编程问答 2022-08-14

问题描述

我们正在构建一个Ember Webapp，用户可以在其中将多个YouTube视频添加到页面中。这些视频是“包装” Youtube iframe嵌入的Ember组件。

为了遵守Youtube服务条款，我们试图在一个页面开始播放时暂停页面上的所有其他视频，以使一次只能播放一个视频。
为此，请按照以下文档开始在已经使用的iframe嵌入中使用YouTube Player API： https://developers.google.com/youtube/iframe_api_reference

已经实现了这一点，我们现在监听onStateChange事件，以确定何时开始播放视频，然后在所有其他YouTube iframe上使用postMessage方法，以暂停它们。 除了自加载Player API以来，我们一直在看似随机的间隔中收到以下错误：

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)

和

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

当发生这种情况（并非总是如此）时，这些错误会破坏我们为暂停其他视频而构建的功能。
Ember组件彼此独立地实例化，并且每个组件都检查是否存在YT脚本，如有必要，请加载该脚本，并在之前调用过onYouTubeIframeAPIReady时对其进行调用，以为其创建播放器对象自己的iframe。它们大致基于以下内容：https://github.com/oskarrough/ember-youtube/blob/master/addon/components/ember-youtube.js

在此之前，是否有人遇到过这些错误，并且有针对性的修复程序吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ember.jsjavascriptyoutube-javascript-api