Youtube iframe API无法发布消息

时间:2013-04-17 01:40:47

标签: javascript youtube youtube-api

有一段时间了,我写的一段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.

所以我自己的代码没有帮助。关于stackoverflow的一些问题表明这是一个很快启动new YT.player的问题,所以我尝试了很多东西,例如在window加载上加载yt js api文件,然后只应用api,但是这似乎也没有任何好处。

4 个答案:

答案 0 :(得分:6)

我花了一个多小时,但答案就在我面前。它实际上是非常自我解释的:你不能使用youtube的js api跟踪没有www 的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无法正常工作。

小提琴 - http://jsfiddle.net/8tkgW/(在镀铬/山狮上测试)

顺便说一句,在写这个答案时,我遇到了YouTube iframe API: how do I control a iframe player that's already in the HTML? - 注意这个家伙的小提琴。他编写了自己的youtube iframe实现(哇!)。如果您将小提琴中的iframe源地址更改为没有www的地址,则将起作用。这只意味着youtube写了坏js。糟糕的坏事!

答案 1 :(得分:6)

我知道这篇文章已有3年历史,但对于那些仍在寻找答案的人来说:

添加此脚本,一切正常:

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

我遇到了与jwplayer相同的问题并用该脚本修复了它。

答案 2 :(得分:5)

不要忘记将其添加到白名单中:

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

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

答案 3 :(得分:2)

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

以下是最佳解决方案I found from this 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}