wake-up-neo.net

YouTube-API und Cross-Origin-Anforderungen

Hat YouTube begonnen, Origin-Anfragen zu blockieren?

Ich verwende auf meiner Website ein Vollbild-Autoplay-Held-Video, das lange Zeit einwandfrei funktioniert. Innerhalb der letzten paar Wochen hat es nicht mehr funktioniert und ich habe den folgenden Fehler in den Protokollen.

Fehler bei der Ausführung von 'postMessage' für 'DOMWindow': Das angegebene Ziel (' https://www.youtube.com ') stimmt nicht mit dem Ursprung des Empfängerfensters (' https: //tbrogames.github) überein .io ').

Per Antwort auf diese Frage

Ich habe versucht, den Host zwischen http und https zu ändern, um zu sehen, ob dies behoben werden könnte und nicht.

Meine Website, die den Fehler auslöst: https://tbrogames.github.io/

Ich konnte eine größere Spiele-Website finden, die genau diese Ausgabe hat.https://playbattlegrounds.com/main.pu

Sie verwenden auch ein Youtube-Video als Held/Splash-Video. und es funktioniert nicht mehr und wirft den gleichen Fehler.

Das entsprechende Javascript finden Sie hier https://github.com/tbrogames/tbrogames.github.io/blob/master/js/defer.js

Dies funktionierte jedoch lange Zeit und ich habe den Code nicht geändert. Deshalb denke ich, dass es eine Veränderung ist, die YouTube vorgenommen hat.

6
erebel55

Ich halte diesen Fehler für irreführend. Ich hatte das gleiche Problem, aber ich glaube, dass es eigentlich Chrom ist, das den Helden nicht mehr automatisch spielt. Diese Fehlermeldung wird angezeigt: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Der Fix für mich war das Stummschalten des Videos in Javascript Before, um das Video abzuspielen. Die iframe-Version der Einbettung mit denselben Eigenschaften würde not autoplay ausführen

<script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('ythero', {
          videoId: '3FjTef9gn3Q',
          height: '100%',
          width: '100%',
          playerVars: {
            rel: 0,
            controls: 0,
            showinfo: 0,
            autoplay: 1,
            loop: 1,
            playlist: '3FjTef9gn3Q',
            modestbranding: 1
          },
          events: {
            'onReady': onPlayerReady,
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.mute();
        event.target.playVideo();
      }
    </script>
1
relytmcd

YouTube lässt es zu. Stellen Sie sicher, dass Sie von einer URL laden, wie zum Beispiel:

https://www.youtube.com/embed/HIbAz29L-FA?modestbranding=1&playsinline=0&showinfo=0&enablejsapi=1&Origin=https%3A%2Fintercoin.org&widgetid=1

Beachten Sie die Komponente "Origin" sowie "enablejsapi = 1". Origin muss mit dem übereinstimmen, was Ihre Domain ist, und dann wird es auf die Whitelist gesetzt und funktioniert.

1