Youtube API - 无法在“DOMWindow”上执行“postMessage”

Question

我试图在模式打开时开始播放 youtube 视频，直到完成后才进入下一页。

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

无法在“DOMWindow”上执行“postMessage”：提供的目标来源（“ https://www.youtube.com ”）与收件人窗口的来源（“ 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 来使其与我的代码一起使用。

原文由 HenryM 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为该错误消息有点误导，因为它与您的实际主机无关，而是更多关于如何在页面上引用来自 youtube.com 的资源。

为了消除此错误消息，我建议做两件事。 （至少这些在我的案例中有效。）

首先，您应该通过 --- IFrame Player API 引用 https 脚本。当使用 http 调用时，YouTube 会自动将该脚本请求重定向到它的 https 副本，因此如果您直接从 https 引用脚本，就可以消除这种额外的重定向。但最重要的是，如果您的生产环境转到 https ，它不会通过 http 加载该脚本，但会抛出“ 阻止加载混合活动内容”错误。

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

阅读 API 文档的 加载视频播放器 和 支持的参数 部分，根本没有提及 host 参数。事实上，当我从 Player 参数中删除该行时，我不再收到错误消息。 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不应由客户端设置。

旁注：如果您查看 https://www.youtube.com/player_api 的内容，您将看到以下声明： var YTConfig = {'host': 'http://www.youtube.com'}; 。对我来说，这意味着 http://www.youtube.com 是 host 不管怎样，所以即使你在客户端代码中设置它，你也可以尝试将它设置为 https://www.youtube.com 。

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

原文由 dferenc 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在我的案例中，“widget_referrer”丢失了。如果没有任何效果，请尝试 widget_referrer :window.location.href

人们可能会错过的其他可能属性是

起源：window.location.href，enablejsapi：1，

原文由 Piyush 发布，翻译遵循 CC BY-SA 4.0 许可协议