L'API iframe di YouTube non riesce a postare il messaggio

Question

Per un po 'di tempo, un pezzo di javascript che ho scritto che ascolta le azioni di YouTube su una determinata pagina ha funzionato meravigliosamente. Sto usando iframe js api di Youtube: https://developers.google.com/youtube/iframe_api_reference. Ma una recente aggiunta di contenuti, uno specifico video di YouTube, il tracciamento non avrebbe funzionato. Gli eventi non spareranno affatto.

Nella console, ho notato questo messaggio di errore messaggio: Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.

Quindi niente con il mio codice ha aiutato. Alcune domande qui su StackOverflow suggeriscono che questo è un problema con l'avvio di new YT.player troppo presto, quindi ho provato un sacco di cose come caricare il file jp api yt su window carico e applicare solo l'api dopo, ma quello non sembrava fare alcun buono sia.

Answer 1

Mi ci è voluta più di un'ora, ma la risposta era proprio di fronte a me. In realtà è piuttosto auto spiegato: Non è possibile utilizzare js api di youtube per tracciare un video iframe senza www. Non so perché, certamente non lo dice nella loro documentazione.

ho provato un paio di volte e ha confermato, fin d'ora, l'inseguimento di un iframe con la fonte www.youtube.com/embed/0GN2kpBoFs4 avrebbe funzionato meravigliosamente, mentre il monitoraggio youtube.com/embed/0GN2kpBoFs4 getterà:

Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.

La parte confusa, naturalmente, è che entrambi il video carica e gioca bene. È solo l'API che non funziona correttamente.

violino - http://jsfiddle.net/8tkgW/ (Testato su cromo/leone di montagna)

Btw, durante la scrittura di questa risposta mi sono imbattuto in YouTube iframe API: how do I control a iframe player that's already in the HTML? - Avviso di violino di questo ragazzo. Ha scritto la sua implementazione iframe su youtube (wow!). Se si modifica l'indirizzo di origine iframe nel fiddle con uno senza www, lo funzionerà. Questo significa solo che youtube scrive js negativi. Male male male!

Answer 2

So che questo post è di 3 anni, ma per coloro che sono ancora alla ricerca di una risposta:

Aggiungi questo script e tutto funziona benissimo:

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

Ho avuto lo stesso problema con jwplayer e risolto con quello script.

Answer 3

Non dimenticare di aggiungere alla 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/*"/> 

Answer 4

La documentazione API di YouTube consiglia di caricare l'API come questo

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

Ma ottenere questo errore:

Impossibile inviare un messaggio a http://youtube.com.Destinatario ha origine http://www.youtube.com

Ecco la soluzione migliore I found from this site

Quindi aggiungere questo primo in alto prima di chiamare l'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);})();} 

// =========== POI ===============

function onYouTubeIframeAPIReady() {// do stuff here}