YouTube iFrame Player API无法在DOMWindow上执行postMessage [英] YouTube iFrame Player API failed to execute postMessage on DOMWindow

问题描述

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

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

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').

起源和目标都是https，很少有 SO 帖子可以通过保留起源&来解决问题.将网址定位到https.在这种情况下，两者是相同的.

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.

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

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

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
            }
        });
    }

推荐答案

尝试使用loadVideoById

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

This function loads and plays the specified video.

• 必需的 videoId 参数指定要播放的视频的YouTube视频ID.在YouTube数据API中， video 资源的 id 属性指定ID.
• 可选的 startSeconds 参数接受浮点数/整数.如果已指定，则视频将从最接近关键帧的位置开始播放.
• 可选的 endSeconds 参数接受浮点数/整数.如果已指定，则视频将在指定的时间停止播放.
• 可选的 suggestedQuality 参数指定视频的建议播放质量.有关更多信息，请参见 setPlaybackQuality 函数的定义有关播放质量的信息.

• 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.
• 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.
• The optional endSeconds parameter accepts a float/integer. If it is specified, then the video will stop playing at the specified time.
• 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.

以下是帮助您的代码段

JS

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>

这篇关于YouTube iFrame Player API无法在DOMWindow上执行postMessage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！