Die Ausführung von 'postMessage' in 'DOMWindow' ist fehlgeschlagen: Ziel / Ursprung stimmen nicht überein, http vs https

Ich entschuldige mich im Voraus, da ich von meinem Problem sehr verwirrt bin. Ich bin wirklich in der Klemme, weil dies ein Problem in meiner Produktionsstätte verursacht.

Ich besitze einen Javascript-Player auf meiner Website, mit dem sich Musiktitellisten abspielen lassen, die auf YouTube, Soundcloud oder Vimeo gehostet werden können. Gestern ist mir dieser Fehler aufgefallen, der im Allgemeinen immer dann auftritt, wenn Sie versuchen, ein neues Lied durch "Überspringen" mit den Player-Tasten zu laden. Dieser Fehler ist erst am letzten oder zweiten Tag aufgetreten. Ich sehe nichts Neues in den Versionshinweisen für die YouTube-API, und dieser Fehler tritt bei Verwendung von Chrome, Firefox und Safari auf. Daher hängt er höchstwahrscheinlich nicht mit einer Änderung des Browsers zusammen. Etwas, das ich verwende, hat sich jedoch geändert, da ich seit 18 Tagen keinen neuen Code mehr gepusht habe.

Eine Beispiel-Wiedergabeliste finden Sie hier:http: //www.muusical.com/playlists/programming-musi

Ich denke, ich habe den Weg zum Reproduzieren des Fehlers isoliert. Hier sind die Schritte:

Spielen Sie einen von YouTube gehosteten Song.Springen Sie zu einem beliebigen anderen Song in der Liste (entweder durch Drücken der Sprungtasten oder direkt durch Drücken der Wiedergabetaste auf dem Zeilenelement des Songs).

* Wenn es sich bei dem ersten Titel in der Wiedergabeliste um einen YouTube-Titel handelt, wird der Fehler verursacht, wenn Sie einfach zu einem anderen Titel springen, ohne den ursprünglich geladenen YouTube-Titel abzuspielen.

Erscheinend tritt der Fehler auf, wenn Sie ein YouTube-Lied geladen und / oder abgespielt haben und versuchen, zu einem anderen Lied zu springen.

Lassen Sie mich wissen, wenn Sie eine Ausnahme von diesem Verhalten finden.

Ich sehe diesen Fehler in der Konsole:

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').

Ich lade den Player mit der Javascript-API von YouTube:

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

Welche iframe erzeugt:

<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>

Nachdem ich den obigen Youtube-Song übersprungen habe, sehe ich Folgendes im iframe geladen:

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

Ich unterstütze YouTube-, Soundcloud- und Vimeo-Songs. Sobald ein YouTube-Song geladen ist, ändert sich der "Ursprung" von http zu https. Ich denke nicht, dass es notwendig ist, die Einbettungsmethoden für die anderen Hosts einzubeziehen, da dieser Fehler auftritt, auch wenn die gesamte Wiedergabeliste nur aus YouTube besteht und nicht in einer Wiedergabeliste, die nur aus Songs von Soundcloud und Vimeo besteht.

Auch so lade ich das Javascript von 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);

Bitte teilen Sie mir mit, ob ich etwas klären muss, und bedanken Sie sich im Voraus für Ihren Blick.

Antworten auf die Frage(8)

Ihre Antwort auf die Frage