Question

我尝试在打开模式时启动YouTube视频，但在完成之前不会进入下一页。

我的下面的脚本适用于Chrome，但在Firefox和Edge中会产生此错误。

无法执行＆＃39; postMessage＆＃39;在＆＃39; DOMWindow＆＃39;：目标来源提供（＆＃39; https://www.youtube.com＆＃39;）与收件人不匹配窗口的起源（＆＃39; http://example.com＆＃39;）。

的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 上，还有另一件事：

仔细阅读API文档的Loading a Video Player和Supported Parameters部分，根本没有提及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美分。

Answer 2

解决方案很简单，虽然我不知道为什么。通过从模态中删除api，它工作正常。在模态中它不会。

Answer 3

就我而言（类似于此处选择的答案Youtube API error - Failed to execute 'postMessage' on 'DOMWindow':）归结为以下事实：在实例化播放器时，视频在页面上不可见。

Answer 4

在我的情况下，“ widget_referrer”丢失了。如果没有适合您的方法，请尝试 widget_referrer：window.location.href

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

origin：window.location.href， enablejsapi：1，

Answer 5

我的网站没有配置www，而youtube链接带有www，这就是我收到此错误的原因。尝试使其相似，我从YouTube上删除了www，并且可以正常使用。

Youtube API - 无法执行＆＃39; postMessage＆＃39;关于DOMWindow＆＃39;

5 个答案: