Youtube iframe API 无法发布消息

Posted 2023-02-24

【中文标题】Youtube iframe API 无法发布消息

【英文标题】：Youtube iframe API fails to post message

【发布时间】：2013-04-09 14:58:50

【问题描述】：

一段时间以来，我编写的一段 javascript 可以监听特定页面上的 youtube 操作，效果非常好。我正在使用 Youtube 的 iframe js api：https://developers.google.com/youtube/iframe_api_reference。 但是最近添加的一个内容，一个特定的 youtube 视频，跟踪不起作用。事件根本不会触发。

在控制台中，我注意到这个帖子消息错误： Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.

所以我自己的代码没有任何帮助。 *** 上的一些问题表明这是太早启动new YT.player 的问题，所以我尝试了一大堆事情，比如在window load 上加载 yt js api 文件，然后才应用 api，但这并没有似乎也有什么好处。

【参考方案1】：

我知道这篇文章已经 3 年了，但对于那些仍在寻找答案的人：

添加此脚本，一切正常：

<script src="https://www.youtube.com/iframe_api"></script>

我在 jwplayer 上遇到了同样的问题，并用那个脚本修复了它。

【讨论】：

谢谢，尝试了很多东西，包括“Access-Control-Allow-Origin”。但只有这样才有帮助。

【参考方案2】：

我花了一个多小时，但答案就在我面前。这实际上是非常自我解释的：如果没有www，您将无法使用 youtube 的 js api 来跟踪 iframe 视频。我不知道为什么，他们的文档中肯定没有这样说。

我对此进行了几次测试并确认，截至目前，使用源 www.youtube.com/embed/0GN2kpBoFs4 跟踪 iframe 会非常有效，而跟踪 youtube.com/embed/0GN2kpBoFs4 会抛出：

Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.

当然，令人困惑的部分是视频加载和播放都很好。只有 API 不能正常工作。

fiddle - http://jsfiddle.net/8tkgW/（在铬/山狮上测试）

顺便说一句，在写这个答案时我遇到了YouTube iframe API: how do I control a iframe player that's already in the html? - 注意这个人的小提琴。他编写了自己的 youtube iframe 实现（哇！）。如果您将 fiddle 中的 iframe 源地址更改为不带www 的地址，它会起作用。这仅意味着 youtube 编写了糟糕的 js。坏坏坏！

【参考方案3】：

别忘了把它加入白名单：

<!-- Add the whitelist plugin -->
<plugin name="cordova-plugin-whitelist" source="npm" spec="*"/>

<!-- White list https access to Youtube -->
<allow-navigation href="https://*youtube.com/*"/>

【参考方案4】：

youtube api 文档建议像这样加载 api

var tag = document.createElement('script');
tag.src = "http://youtube.com/iframe_api";
tag.id = "youtubeScript";
var firstScriptTag = document.getElementsByTagName('script')[1];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

但是得到这个错误： 无法将消息发布到 http://youtube.com。收件人来自http://www.youtube.com

这是我从 [a now dead site] 找到的最佳解决方案：

所以在调用 Api 之前先在顶部添加这个

if (!window['YT']) var YT = loading: 0,loaded: 0;
if (!window['YTConfig']) var YTConfig = 'host': 'http://www.youtube.com';
if (!YT.loading) YT.loading = 1;(function()var l = [];YT.ready = function(f) if (YT.loaded) f(); 
else 
l.push(f);;
window.onYTReady = function() YT.loaded = 1;for (var i = 0; i < l.length; i++) try l[i](); catch (e) ;
YT.setConfig = function(c) for (var k in c) if (c.hasOwnProperty(k)) YTConfig[k] = c[k];;
var a = document.createElement('script');
a.type = 'text/javascript';
a.id = 'www-widgetapi-script';
a.src = 'https:' + '//s.ytimg.com/yts/jsbin/www-widgetapi-vflumC9r0/www-widgetapi.js';
a.async = true;
var b = document.getElementsByTagName('script')[0];
b.parentNode.insertBefore(a, b);)();

//===========THEN==============================

function onYouTubeIframeAPIReady () // do stuff here