javascript Youtube iframe API 无法发布消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16050024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Youtube iframe API fails to post message
提问by ido
For awhile now, a piece of javascript I wrote which listens to youtube actions on a certain page worked wonderfully. I am using Youtube's iframe js api: https://developers.google.com/youtube/iframe_api_reference. But one recent content addition, a specific youtube video, the tracking wouldn't work. The events won't fire at all.
一段时间以来，我编写的一段 javascript 用于监听某个页面上的 youtube 操作，效果非常好。我正在使用 Youtube 的 iframe js api：https: //developers.google.com/youtube/iframe_api_reference。但是最近添加的一个内容，一个特定的 youtube 视频，跟踪不起作用。这些事件根本不会触发。
In the console, I noticed this post message error:
Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.
在控制台中，我注意到此帖子消息错误：
Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.
So nothing with my own code helped. Some questions here on stackoverflow suggested this is an issue with initiating new YT.playertoo soon, so I tried a whole bunch of things like loading the yt js api file on windowload and only apply the api after, but that didn't seem to do any good either.
所以我自己的代码没有任何帮助。stackoverflow 上的一些问题表明这是启动new YT.player过早的问题，因此我尝试了很多方法，例如在加载时加载 yt js api 文件window并仅在之后应用 api，但这似乎也没有任何好处.
采纳答案by ido
It took me over an hour, but the answer was right in front of me. It's actually pretty self explained: You cannot use youtube's js api to track an iframe video without www. I don't know why, it certainly does not say so in their documentation.
我花了一个多小时，但答案就在我眼前。它实际上是自我解释的：您不能使用 youtube 的 js api 来跟踪没有www. 我不知道为什么，在他们的文档中肯定没有这么说。
I tested this a few times and confirmed, as of now, tracking an iframe with the source www.youtube.com/embed/0GN2kpBoFs4would work wonderfully while tracking youtube.com/embed/0GN2kpBoFs4will throw:
我对此进行了几次测试并确认，截至目前，使用源跟踪 iframewww.youtube.com/embed/0GN2kpBoFs4会很好地工作，而跟踪youtube.com/embed/0GN2kpBoFs4会抛出：
Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.
Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.
The confusing part of course is that both the video load and play fine. It's only the API which is not working properly.
当然，令人困惑的部分是视频加载和播放都很好。只是 API 无法正常工作。
fiddle - http://jsfiddle.net/8tkgW/(Tested on chrome / mountain lion)
小提琴 - http://jsfiddle.net/8tkgW/（在 chrome / 山狮上测试）
Btw, while writing this answer I came across YouTube iframe API: how do I control a iframe player that's already in the HTML?- notice this guy's fiddle. He wrote his own youtube iframe implementation (wow!). If you change the iframe source address in the fiddle to one without www, it will work. This only means youtube writes bad js. Bad bad bad!
顺便说一句，在写这个答案时，我遇到了YouTube iframe API：如何控制已经在 HTML 中的 iframe 播放器？- 注意这家伙的小提琴。他编写了自己的 youtube iframe 实现（哇！）。如果您将小提琴中的 iframe 源地址更改为 1 www，则它会起作用。这仅意味着 youtube 编写了糟糕的 js。坏坏坏！
回答by Peppeneppe
I know this post is 3 years old, but for those who are still searching for an answer:
我知道这篇文章已经 3 年了，但对于那些仍在寻找答案的人：
Add this script and everything works fine:
添加此脚本，一切正常：
<script src="https://www.youtube.com/iframe_api"></script>
I've had the same problem with jwplayer and fixed it with that script.
我在 jwplayer 上遇到了同样的问题，并使用该脚本修复了它。
回答by Samuel Thompson
Don't forget to add it to the whitelist:
不要忘记将其添加到白名单：
<!-- Add the whitelist plugin -->
<plugin name="cordova-plugin-whitelist" source="npm" spec="*"/>
<!-- White list https access to Youtube -->
<allow-navigation href="https://*youtube.com/*"/>
回答by ShapCyber
The youtube api documentation recommend to load the api like this
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);
But getting this error:
但收到此错误：
Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com
无法向http://youtube.com发布消息。收件人有来源http://www.youtube.com
Here is the best solution I found from this site
这是我从该站点找到的最佳解决方案
So add this first at the top before calling the Api
所以在调用 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}
