Блог

Когда я запускаю встроенное видео YouTube с iframe помощью в моем браузере Chrome, используя API JavaScript встроенного видео YouTube, я получаю следующую ошибку в своей консоли:

www-widgetapi.js:581 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://symfony.XXXXXX.com') .

Я обслуживаю веб-страницу, содержащую атрибут iframe who src , для которого установлен URL-адрес видео YouTube вместе с несколькими настройками в параметрах поиска URL, включая origin параметр, установленный для URL-адреса моей веб-страницы. Вот iframe :

 "<iframe width="480" height="390" frameborder="0"
         src="https://www.youtube.com/embed/rs50Ie1dHXg?autohide=1amp;autoplay=1amp;cc_load_policy=0amp;controls=0amp;disablekb=1amp;enablejsapi=1amp;fs=0amp;iv_load_policy=3amp;modestbranding=1amp;rel=0amp;showinfo=0amp;start=0amp;widgetid=1amp;origin=https://symfony.XXXXXX.com"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>"
  

Я проверил вышеуказанное по содержимому объекта YouTube после выполнения следующих инструкций, и объект API YouTube правильно имел вышеуказанные значения. Вот инструкции, которые я использую для создания объекта API YouTube:

 const IFRAME = document.querySelector( 'iframe#YouTube-Player.YouTube-iframe' );
const $IFRAME = $( IFRAME );

var switches = { 'autohide' :       1,   'autoplay' :       1,
                 'cc_load_policy' : 0,   'controls' :       0,
                 'disablekb' :      1,   'enablejsapi' :    1,
                 'fs' :             0,   'iv_load_policy' : 3,
                 'modestbranding' : 1,   'rel' :            0,
                 'showinfo' :       0,   'start' :          0,
                 'widgetid' :       1,
                 'origin' :         window.location.origin };

//
// In my code I have a function that reads the switches object and assigns its
// contents them as a string to the iframe's src attribute, but for simplicity,
// I'm assigning that content directly to the end of the YouTube Video URL that
// I'm setting the iframe's src attribute to.
//

var str_switches = '?autohide=1amp;autoplay=1'  
                   'amp;cc_load_policy=0amp;controls=0'  
                   'amp;disablekb=1amp;enablejsapi=1'  
                   'amp;fs=0amp;iv_load_policy=3'  
                   'amp;modestbranding=1amp;rel=0'  
                   'amp;showinfo=0amp;start=0'  
                   'amp;widgetid=1'  
                   'amp;origin=https://symfony.######.com";

IFRAME.src = 'https://www.youtube.com/embed/rs50Ie1dHXg'  
             '?autohide=1amp;autoplay=1'  
             'amp;cc_load_policy=0amp;controls=0'  
             'amp;disablekb=1amp;enablejsapi=1'  
             'amp;fs=0amp;iv_load_policy=3'  
             'amp;modestbranding=1amp;rel=0'  
             'amp;showinfo=0amp;start=0'  
             'amp;widgetid=1'  
             'amp;origin=https://symfony.######.com";

var youtubePlayer = new YT.Player( 'YouTube-Player',
                                   { videoId :    'rs50Ie1dHXg',
                                     width :      Math.max( IFRAME.clientWidth,
                                                            $IFRAME.width() ),
                                     height :     Math.max( IFRAME.clientHeight,
                                                            $IFRAME.height() ),
                                     name :       'a_blank',
                                     playerVars : switches,
                                     events :     { 'onError' :      onError,
                                                    'onReady' :       onPlayerReady,
                                                    'onStateChange' : onPlayerStateChange }
                                                  } );
  

Я не показываю обработчики onError событий, onPlayerReady , и onStateChange , но они работают, видео воспроизводится, а функции onPlayerReady и onStateChange обработчики событий вызываются правильно, что позволяет мне отслеживать ход видео по мере его воспроизведения, паузы и завершения.

Как уже говорили другие, это сообщение вводит в заблуждение. Да, если бы я не запускал свой сайт с сайта YouTube, не было бы другой веской причины, по которой мой сайт origin соответствовал бы цели origin . Очевидно, что API YouTube жалуется на что-то еще.

Я рассмотрел все проблемы с переполнением стека по этому вопросу, а также то, что я мог найти в Интернете, но либо ответов не было, какие ответы были даны, не применялись, либо попытка нескольких, которые казались полезными, не устранила ошибку, которую я получаю, в том числе этоМне нужно было запустить свой веб-сайт с URL-адресом HTTPS и просто не указывать origin параметр.

Почему возникает ошибка не удалось выполнить postMessage … и какое влияние это оказывает на мою способность отслеживать и контролировать воспроизведение видео.

Спасибо.