Не удалось выполнить 'postMessage' в 'DOMWindow': несоответствие цели / источника http vs https

Я заранее прошу прощения, потому что меня очень смущает моя проблема. Я действительно в затруднении, потому что это вызывает проблему на моей производственной площадке.

На моем сайте есть проигрыватель javascript, который воспроизводит списки песен, которые можно размещать на youtube, soundcloud или vimeo. Вчера я заметил эту ошибку, которая обычно возникает всякий раз, когда вы пытаетесь загрузить новую песню через «пропуск» с помощью кнопок плеера. Эта ошибка только началась в последний день или два. Я не вижу ничего нового в примечаниях к выпуску youtube api, и эта ошибка возникает при использовании Chrome, Firefox и Safari, поэтому, скорее всего, она не связана с изменением браузера. Что-то, что я использую, изменилось, хотя, поскольку я не выдвигал новый код в течение 18 дней.

Пример списка воспроизведения здесь:http://www.muusical.com/playlists/programming-music

Я думаю, что я выделил способ воспроизвести ошибку, вот шаги:

Слушать песню на YouTube.Перейти к любой другой песне в списке (нажатием кнопок пропуска или прямым нажатием кнопки воспроизведения на элементе строки песни).

* Обратите внимание, что если первая песня в списке воспроизведения является песней YouTube, просто переход к другой песне даже без воспроизведения изначально загруженной песни YouTube вызовет ошибку.

По сути, ошибка, кажется, возникает, когда вы загрузили и / или проиграли песню на YouTube и попытаетесь перейти к другой песне.

Дайте мне знать, если вы найдете исключение из этого поведения.

Я вижу эту ошибку в консоли:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.muusical.com') does not match the recipient window's origin ('http://www.muusical.com').

Я загружаю плеер с использованием API Java YouTube:

new YT.Player('playlist-player', {
      playerVars: { 'autoplay': 1, 'fs': 0 },
      videoId: "gJ6APKIjFQY",
      events: {
        'onReady': @initPlayerControls,
        'onStateChange': @onPlayerStateChange
      }
    })

Который производит этот iframe:

<iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/gJ6APKIjFQY?autoplay=1&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.muusical.com"></iframe>

После нажатия пропустить из вышеупомянутой песни YouTube, это то, что я вижу загружен в iframe:

<iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src=""></iframe>

Я поддерживаю песни YouTube, SoundCloud и Vimeo. Кажется, что как только песня на YouTube загружена, «origin» меняется с http на https. Я не думаю, что необходимо включать методы встраивания для других хостов, так как эта ошибка возникает, даже если весь плейлист - только youtube, и его нет в плейлисте, который состоит только из песен из Soundcloud и Vimeo.

Кроме того, вот как я загружаю JavaScript YouTube:

// Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Пожалуйста, дайте мне знать, если вам нужно, чтобы я что-то прояснил, и заранее спасибо, что посмотрели.

Ответы на вопрос(4)

Ваш ответ на вопрос