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

Question

我正在尝试使用 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').

起点和目标都是https，很少有SO post通过保持起点和目标url来解决问题https。在这种情况下两者是相同的。

以下是我用来动态加载播放器的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
            }
        });
    }

Answer 1

尝试使用 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.

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

YouTube iFrame Player API failed to execute postMessage on DOMWindow

javascript

youtube

iframe

youtube-api

youtube-iframe-api