YouTube iFrame Player API无法在DOMWindow上执行postMessage

I am trying to load youtube into my web page using YouTube iFrame Player API, and getting following error while loading:

我正在尝试使用YouTube iFrame Player API将youtube加载到我的网页中,并在加载时收到以下错误:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://developer-sandbox.com').

both origin and target are https, there are few SO post which resolves the issue by keeping origin & target url to https. In this case both are same.

原点和目标都是https,SO帖子很少通过将原点和目标网址保存到https来解决问题。在这种情况下两者都是相同的。

Following is the JS code I am used to load the player dynamically:

以下是我用来动态加载播放器的JS代码:

showVideoPreview: function(youtube_id){
        var meThis = this;
        var player = new YT.Player('shoppable-video-container', {
            height  : '315',
            width   : '560',
            videoId : youtube_id,
            events  : {
                'onReady'       : meThis.onPlayerReady,
                'onStateChange' : meThis.onPlayerStateChange
            }
        });
    }

1 个解决方案

#1

Try using loadVideoById

尝试使用loadVideoById

This function loads and plays the specified video.

此功能加载并播放指定的视频。

The required videoId parameter specifies the YouTube Video ID of the video to be played. In the YouTube Data API, a video resource's id property specifies the ID.

所需的videoId参数指定要播放的视频的YouTube视频ID。在YouTube Data API中,视频资源的id属性指定ID。

The optional startSeconds parameter accepts a float/integer. If it is specified, then the video will start from the closest keyframe to the specified time.

可选的startSeconds参数接受float / integer。如果已指定,则视频将从最近的关键帧开始到指定时间。

The optional endSeconds parameter accepts a float/integer. If it is specified, then the video will stop playing at the specified time.

可选的endSeconds参数接受float / integer。如果已指定,则视频将在指定时间停止播放。

The optional suggestedQuality parameter specifies the suggested playback quality for the video. Please see the definition of the setPlaybackQuality function for more information about playback quality.

可选的suggestedQuality参数指定视频的建议播放质量。有关播放质量的更多信息,请参阅setPlaybackQuality函数的定义。

Here is a snippet to help you

这是一个帮助你的片段

function searchVideo(){
var vID = document.getElementById("vidID").value
player.loadVideoById(vID, 0, "default");

}

HTML

Search by Video ID: <input type="text" id="vidID" name="vidID"><button onclick="searchVideo()">Search</button>

#1