Youtube API-无法在"DOMWindow"上执行"postMessage" [英] Youtube API - Failed to execute 'postMessage' on 'DOMWindow'

问题描述

我正在尝试在模态打开时开始youtube视频，直到完成后才进入下一页.

I'm trying to start a youtube video when a modal is opened and not progress to the next page until it is completed.

我的以下脚本在Chrome中有效，但在Firefox和Edge中会产生此错误.

My script below works in Chrome but produces this error in Firefox and Edge.

无法在"DOMWindow"上执行"postMessage":目标来源提供的(' https://www.youtube.com ')与收件人不匹配窗口的来源(" http://example.com ').

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('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>

我已审查此问题/答案，但似乎无法通过修改http/https使其与我的代码一起使用.

I have reviewed this question/answer but cannot seem to get it working with my code by amending the http / https.

推荐答案

我认为该错误消息有点误导，因为它与您的实际主机无关，但更多有关youtube.com上的资源在页面上被引用.

I think that the error message is a little bit misleading, as it has nothing to do with your actual host, but is more about how resources from youtube.com are referenced on the page.

为了避免该错误消息，我建议您做两件事.(至少这些对我而言有效.)

There are two things I would suggest in order to get rid of this error message. (At least these were working in my case.)

首先，您应该通过 https 引用 IFrame Player API 脚本.当使用 http 调用时，YouTube会自动将该脚本请求重定向到与其对应的 https ，因此，如果您直接从 https 引用该脚本，则可以避免这种情况额外的重定向.但最重要的是，如果您的生产环境曾经使用过 https ，它将不会通过 http 加载该脚本，但是会抛出"

First and foremost you should reference the IFrame Player API script via https. When called with http, YouTube redirects that script request automatically to it’s https counterpart, so if you reference the script directly from https, that eliminates this extra redirect. But most importantly, in case your production environment ever goes to https, it won’t load that script over http, but will throw a "Blocked loading mixed active content" error.

根据我的测试，仅此更改就已经可以神奇地解决该问题.但是，如果您希望将其保留在 http 上，则还有另一件事:

According to my tests this change alone would already magically solve the issue. However in case you would prefer to leave that on http, there is this other thing:

通读加载视频播放器和

Reading through the Loading a Video Player and the Supported Parameters sections of the API docs, there is no mention about the host parameter at all. In fact when I removed that line from the Player parameters I didn't receive the error message any more. Also, interestingly, when I set host literally to http://www.example.com, the error message reads: The target origin provided (‘http://www.example.com’) does not match the recipient window’s origin ….) Therefore I think the host parameter should not be set by the client.

旁注:如果您查看 https://www.youtube.com/player_api 的内容，则会看到以下语句: var YTConfig = {'host':'http://www.youtube.com'}; .对我而言，这意味着 http://www.youtube.com 始终是 host 的某种默认值，因此即使您在客户端代码中进行设置，您可以尝试将其设置为 https://www.youtube.com .

Sidenote: If you have a look at the contents of https://www.youtube.com/player_api, you will see this statement: var YTConfig = {'host': 'http://www.youtube.com'};. To me it means that http://www.youtube.com is some kind of a default for host anyways, so even if you go and set it in the client code, you could try to set it to https://www.youtube.com.

长话短说，请尝试使用< script src ="https://www.youtube.com/player_api"></script> 并注释掉 host.这是我的2美分.

Long story short, try to use <script src="https://www.youtube.com/player_api"></script> and comment out the host. This is my 2 cents.

这篇关于Youtube API-无法在"DOMWindow"上执行"postMessage"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！