12

一段时间以来，我编写的一段 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太早的问题，所以我尝试了一大堆事情，比如在加载时加载 yt js api 文件，window然后才应用 api，但这似乎也没有任何好处.

4

4 回答 4

7

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

添加此脚本，一切正常：

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

我对 jwplayer 也有同样的问题，并用那个脚本修复了它。

于 2016-04-25T15:34:38.117 回答
6

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

我对此进行了几次测试并确认，截至目前，使用源跟踪 iframewww.youtube.com/embed/0GN2kpBoFs4可以很好地工作，而跟踪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：如何控制 HTML 中已经存在的 iframe 播放器？- 注意这家伙的小提琴。他编写了自己的 youtube iframe 实现（哇！）。如果您将 fiddle 中的 iframe 源地址更改为没有www，它将起作用。这仅意味着 youtube 编写了糟糕的 js。坏坏坏！

于 2013-04-17T01:40:47.200 回答
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/*"/>
于 2016-05-24T17:18:49.773 回答
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

这是我从 [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}
于 2016-06-11T09:34:24.667 回答