javascript - Youtube API - 无法在 'postMessage' 上执行 'DOMWindow'

Question

我正在尝试在模式打开时开始播放 YouTube 视频，并且在完成之前不会进入下一页。

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

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>

我已经查看了this question/answer但似乎无法通过修改 http/https 让它与我的代码一起工作。

Answer 1

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

为了消除此错误消息，我建议做两件事。 (至少这些对我有用。)

首先，您应该引用 IFrame Player API脚本通过 https .当使用 http 调用时，YouTube 会自动将该脚本请求重定向到它的 https 副本，因此如果您直接从 https 引用脚本，就可以消除这种情况额外的重定向。但最重要的是，如果您的生产环境使用 https，它不会通过 http 加载该脚本，但会抛出一个“Blocked loading mixed active content”。 “错误。

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

通读 Loading a Video Player和 Supported Parameters API文档的部分，没有提到host参数。事实上，当我从 Player 参数中删除该行时，我不再收到错误消息。另外，有趣的是，当我设置 host从字面上看http://www.example.com ，错误消息显示为: The target origin provided (‘http://www.example.com’) does not match the recipient window’s origin … 。)因此我认为 host参数不应由客户端设置。

旁注:如果您查看 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 美分。