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:

通读加载视频播放器和支持的参数 部分的 API 文档，根本没有提到 host 参数.事实上，当我从 Player 参数中删除该行时，我不再收到错误消息.此外，有趣的是，当我将 host 从字面上设置为 http://www.example.com 时，错误消息显示为:The target origin provided ('http://www.example.com') 与收件人窗口的来源不匹配…….)因此我认为 host 参数不应该由客户端设置.

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