如何解决来自YouTube嵌入的'DOMWindow'错误的'失败'postMessage'

Question

使用YouTube JavaScript/iFrame API我试图寻求视频的不同时间等.

我已经删除了一个演示:http://jsbin.com/yuliponu

var player;
window.onYouTubeIframeAPIReady = function() {
  var iframe = document.createElement("iframe");
  iframe.width = 400;
  iframe.height = 300;
  iframe.id = "youtubeIframe";
  iframe.src = "https://www.youtube.com/embed/yta1WRuiupk?autoplay=1&enablejsapi=1&origin="+encodeURIComponent(window.location.protocol+"//"+document.domain)+"&playsinline=1&rel=0";
  iframe.setAttribute('frameborder', '0');
  iframe.setAttribute('allowFullScreen', '');
  document.getElementById("video").appendChild(iframe);

  player = new YT.Player('youtubeIframe');
};

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

如果您在控制台中查看,您将看到此错误:

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

我需要这个来解决开始使用JavaScript API,但我不知道如何解决它.

更新:

我已经重新启动了我的电脑,并且没有发生错误.如果我再次看到错误,我会更新.

Answer 1

问题是您正在使用纯 HTTP 传输的网站上进行测试，但您请求了 SSL 版本的 YouTube API。我确实认为 Google 已经在他们的 Youtube IFrame API JS 中修复了这个问题，但使用它会是最优雅的：

tag.src = "//www.youtube.com/iframe_api";

代替

tag.src = "https://www.youtube.com/iframe_api";

自动选择与父级相同的协议。