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来使用我的代码.

Answer 1

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

为了摆脱这个错误信息,我建议有两件事.(至少这些是在我的情况下工作.)

首先,您应该IFrame Player API通过脚本引用脚本https.使用http调用时,YouTube会自动将该脚本请求重定向到其https对应项,因此如果您直接从https引用该脚本,则会消除此额外重定向.但最重要的是,如果您的生产环境转到https,它将不会通过http加载该脚本,但会抛出" 阻止加载混合活动内容 "错误.

根据我的测试,仅这一变化就已经神奇地解决了这个问题.但是,如果您希望将其保留在http上,还有另一件事:

通过加载 API文档的视频播放器和支持的参数部分,根本没有提到host参数.事实上,当我从播放器参数中删除该行时,我不再收到错误消息.另外,有趣的是,当我按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美分.