javascript - 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帖子通过将来源和目标网址保留为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>