web-dev-qa-db-fra.com

API Youtube - Impossible d'exécuter 'postMessage' sur 'DOMWindow'

J'essaie de démarrer une vidéo youtube lorsqu'un modal est ouvert et de ne pas passer à la page suivante tant qu'elle n'est pas terminée.

Mon script ci-dessous fonctionne dans Chrome mais génère cette erreur dans Firefox et Edge.

Échec de l'exécution de 'postMessage' sur 'DOMWindow': l'origine cible fourni (' https://www.youtube.com ') ne correspond pas au destinataire Origine de la fenêtre (' http://example.com ').

Javascript 

<script src="http://www.youtube.com/player_api"></script>

<script>

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {          
            alert('Thank you for watching - Click OK to see your results');
        }
    }

</script>

<script language="JavaScript">
    $(document).ready(function() {
        $('#post_form').submit(function() { // catch the form's submit event
            $("#adModal").modal("show");
            var time = $('#adtime').val();
            //startCountdownTimer(time) ;

            // create youtube player
            var player;
            player = new YT.Player('player', {
                width: '640',
                height: '390',
                videoId: 'EF-jwIv1w68',
                Host: 'http://www.youtube.com',
                events: {
                    onReady: onPlayerReady,
                    onStateChange: onPlayerStateChange
                }
            });

        });
    });
</script>

J'ai examiné cette question/réponse mais je n'arrive pas à le faire fonctionner avec mon code en modifiant http/https.

javascriptyoutube
5
HenryM

La solution était simple, bien que je ne sache pas pourquoi. En supprimant l’API du modal, cela a bien fonctionné. Dans le modal, ça ne serait pas.

1
HenryM

Je pense que le message d'erreur est un peu trompeur, car il n'a rien à voir avec votre hôte actuel, mais concerne plutôt la manière dont les ressources de youtube.com sont référencées sur la page.

Il y a deux choses que je suggérerais afin de se débarrasser de ce message d'erreur. (Au moins, ils travaillaient dans mon cas.) 

Tout d’abord, vous devez référencer le script IFrame Player API via https. Lorsqu'il est appelé avec http, YouTube redirige automatiquement cette requête de script vers son homologue https. Par conséquent, si vous référencez le script directement à partir de https, cette redirection supplémentaire est éliminée. Mais surtout, si votre environnement de production passe à https, il ne chargera pas ce script sur http, mais générera une erreur « Blocage du chargement de contenu actif mixte ». 

Selon mes tests, ce changement à lui seul résoudrait déjà, comme par magie, le problème. Cependant, si vous préférez laisser cela sur http, voici une autre chose:

En parcourant les sections Chargement d'un lecteur vidéo et Paramètres pris en charge de la documentation de l'API, le paramètre Host n'est absolument pas mentionné. En fait, lorsque j'ai supprimé cette ligne des paramètres du lecteur, je n'ai plus reçu le message d'erreur. En outre, il est intéressant de noter que lorsque je mets littéralement Host sur http://www.example.com, le message d’erreur indique: The target Origin provided (‘http://www.example.com’) does not match the recipient window’s Origin ….) Par conséquent, je pense que le paramètre Host ne doit pas être défini par le client.

Note: Si vous regardez le contenu de https://www.youtube.com/player_api, vous verrez cette déclaration: var YTConfig = {'Host': 'http://www.youtube.com'};. Pour moi, cela signifie que http://www.youtube.com est une sorte de valeur par défaut pour Host de toute façon, donc même si vous le définissez dans le code client, vous pouvez essayer de le définir sur https://www.youtube.com.

En résumé, essayez d'utiliser <script src="https://www.youtube.com/player_api"></script> et de commenter la Host. Ceci est mes 2 cents.

5
dferenc

Mon site Web est configuré sans la www et le lien youtube était avec www, c’est pourquoi j’obtenais cette erreur. Essayez de le rendre similaire, j'ai supprimé www de mon youtube, et cela fonctionne. 

0
Awsme Sandy