Error al ejecutar 'postMessage' en 'DOMWindow': destino / origen no coinciden http vs https
Pido disculpas por adelantado ya que estoy muy confundido por mi problema. Estoy realmente en apuros porque esto está causando un problema en mi sitio de producción.
Tengo un reproductor javascript en mi sitio que reproduce listas de canciones que se pueden alojar en youtube, soundcloud o vimeo. Ayer noté este error que generalmente surge cada vez que intentas cargar una nueva canción al "saltar" con los botones del reproductor. Este error acaba de comenzar en el último día o dos. No veo nada nuevo en las notas de la versión de la API de YouTube y este error se produce con Chrome, Firefox y Safari, por lo que lo más probable es que no esté relacionado con un cambio en el navegador. Sin embargo, algo que estoy usando ha cambiado, ya que no he introducido un nuevo código en 18 días.
Un ejemplo de lista de reproducción está aquí:http://www.muusical.com/playlists/programming-music
Creo que he aislado la forma de reproducir el error, estos son los pasos:
Reproduce una canción alojada en YouTube.Salte a cualquier otra canción en la lista (ya sea presionando los botones de salto o presionando directamente el botón de reproducción en el elemento de la fila de la canción).* Tenga en cuenta que si la primera canción de la lista de reproducción es una canción de youtube, simplemente saltar a otra canción incluso sin reproducir la canción de youtube cargada inicialmente producirá el error.
Esencialmente, el error parece ocurrir una vez que ha cargado y / o reproducido una canción de YouTube e intenta saltar a otra canción.
Avíseme si encuentra una excepción a este comportamiento.
Veo este error en la consola:
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').
Cargué el reproductor con el uso de la API de YouTube JavaScript:
new YT.Player('playlist-player', {
playerVars: { 'autoplay': 1, 'fs': 0 },
videoId: "gJ6APKIjFQY",
events: {
'onReady': @initPlayerControls,
'onStateChange': @onPlayerStateChange
}
})
Lo que produce este 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&enablejsapi=1&origin=http%3A%2F%2Fwww.muusical.com"></iframe>
Después de pulsar saltar de la canción de YouTube anterior, esto es lo que veo cargado en el iframe:
<iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src=""></iframe>
Apoyo canciones de youtube, soundcloud y vimeo. Parece que una vez que se carga una canción de YouTube, el "origen" cambia de http a https. No creo que sea necesario incluir los métodos de incrustación para los otros hosts, ya que este error ocurre incluso si toda la lista de reproducción es solo youtube y no ocurre en una lista de reproducción que consta de solo canciones de soundcloud y vimeo.
Además, así es como estoy cargando el javascript de 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);
Avíseme si necesita que aclare algo y gracias de antemano por echar un vistazo.