2013-04-17 44 views
10

現在,我寫了一段JavaScript,它在特定頁面上監聽YouTube上的操作,效果非常好。我正在使用Youtube的iframe js api:https://developers.google.com/youtube/iframe_api_reference。 但最近的一個內容添加,特定的YouTube視頻,跟蹤將無法正常工作。事件根本不會開火。Youtube iframe API無法發佈消息

在控制檯中,我發現這個帖子消息的錯誤: Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.

所以沒有什麼用我自己的代碼幫助。這裏的一些問題在stackoverflow建議這是一個問題太早發起new YT.player,所以我嘗試了一大堆東西,如加載window加載yt js api文件,並且只應用api後,但似乎沒有做任何事情好的。

回答

6

我花了一個多小時,但答案是正確的在我面前。這實際上很自我解釋:你不能使用YouTube的js API跟蹤iframe視頻沒有www。我不知道爲什麼,當然在他們的文檔中沒有這樣說。

我這個測試了幾次,確認,截至目前,跟蹤一個iframe與源www.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: how do I control a iframe player that's already in the HTML?來到 - 看到這傢伙的小提琴。他寫了他自己的YouTube的iframe實現(哇!)。如果將小提琴中的iframe源地址更改爲沒有www的源地址,則其將工作。這隻意味着youtube寫入不好的js。壞壞壞!

5

我知道這個職位是3歲,但對於那些誰仍然在尋找一個答案:

添加這個腳本,一切工作正常:

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

我有同樣的問題與jwplayer並修復它的腳本。

+1

這對我有效。 – subashbasnet8

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/*"/> 
0

YouTube的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); 

的API,但得到這個錯誤:

無法發信息至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);})();} 

// ===========在那之前那麼添加此第一頂部=============================

function onYouTubeIframeAPIReady() {// do stuff here}