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);
Но получив эту ошибку:
Вот лучшее решение Я нашел с этого сайта
Итак, добавьте это сначала вверху, прежде чем вызывать 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}
