Youtube iframe API发布消息失败
Youtube iframe API fails to post message
有一段时间了,我写的一个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后,但这似乎也没有做任何好事。
我知道这篇文章是3年前的了,但是对于那些还在寻找答案的人:
添加此脚本,一切正常:
<script src="https://www.youtube.com/iframe_api"></script>
我在jwplayer中遇到了同样的问题,并使用该脚本修复了它。
我花了一个多小时,但答案就在我面前。它实际上很自我解释:你不能使用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:我如何控制一个已经在HTML中的iframe播放器?注意这个人的小提琴。他编写了自己的youtube iframe实现(哇!)如果您将代码中的iframe源地址更改为没有www
的源地址,则将工作。这只意味着youtube编写了糟糕的js。坏坏坏!
别忘了把它加入白名单:
<!-- Add the whitelist plugin -->
<plugin name="cordova-plugin-whitelist" source="npm" spec="*"/>
<!-- White list https access to Youtube -->
<allow-navigation href="https://*youtube.com/*"/>
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
这是我从[一个现已关闭的网站]找到的最佳解决方案:
所以在调用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);})();}
//=========== 然后 =============================
function onYouTubeIframeAPIReady () {// do stuff here}
- Spring Security中的基本身份验证(身份验证失败消息)
- Facebook Messenger,发送收据时临时发送消息失败
- 云代码(javascript)失败,原因是:{代码:1,消息:内部错误
- 当gullow-eslit失败时,抛出一条gullow通知消息
- 检查 http 响应代码以显示相应的失败消息
- 如果使用 JavaScript 登录失败,如何在登录页面中显示消息
- 如果失败,角度回调 API 将添加错误消息
- 解析云代码部署失败,并显示消息“更新失败,出现内部错误”
- JavaScript 失败,出现权限被拒绝错误消息
- POST 请求失败,没有错误消息 (Parse.com / ExpressJS)
- 我只想要在 php 文件中通过 AngularJS 调用 Ajax 后的成功/失败消息.但是我也得到了带有标签的完整HT
- Cordova sendJavascript 不适用于 android 进程消息失败:错误:未定义:10
- 启用JsTestDriver失败的测试消息并修复FailureException错误
- 修改方法以显示成功/失败消息.AngularJS
- 使用dojo在表单上显示成功/失败消息
- 当web api中的validatemode失败时,返回警报消息
- 芹菜+Django——使用Django消息框架轮询任务状态和报告成功或失败
- 在Rails中,如何在视图中显示控制器操作成功或失败的JSON状态消息
- Youtube iframe API发布消息失败
- 在JSON中解析错误消息失败