Youtube iframe 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 слишком рано, поэтому я попробовал целую кучу вещей, таких как загрузка файла yt js api на загрузку window и только применить api после, но это не так похоже, тоже хорошо.

Ответ 1

Мне потребовался час, но ответ был прямо передо мной. Это на самом деле довольно объяснимо: Вы не можете использовать 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, который работает неправильно.

fiddle - http://jsfiddle.net/8tkgW/ (Протестировано на хроме/горном льве)

Кстати, при написании этого ответа я наткнулся на API YouTube iframe: как мне управлять игроком iframe, который уже находится в HTML? - обратите внимание на этого парня. Он написал свою собственную реализацию iframe для youtube (ничего себе!). Если вы измените исходный адрес iframe в скрипте на один без www, он будет работать. Это означает, что youtube пишет bad js. Плохо плохо плохо!

Ответ 2

Я знаю, что этому сообщению 3 года, но для тех, кто все еще ищет ответ:

Добавьте это script, и все работает нормально:

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

У меня была такая же проблема с jwplayer и исправлена с помощью этого script.

Ответ 3

Не забудьте добавить его в белый список:

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

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

Ответ 4

Документация 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}