很抱歉,我对我的问题感到非常困惑。这真的让我陷入了困境,因为它正在我的生产网站上引起问题。
我在我的网站上有一个JavaScript播放器,可以播放YouTube、SoundCloud或Vimeo上托管的歌曲列表。昨天我注意到了这个错误,通常情况下,每当您尝试通过播放器按钮“跳过”加载新歌曲时,就会出现这个错误。这个错误只是在最近一两天开始出现的。我没有在YouTube API发布说明中看到任何新内容,并且此错误在Chrome、Firefox和Safari中发生,因此很可能与浏览器的更改无关。不过,我正在使用的某些东西已经发生了变化,因为我已经18天没有推送新代码了。
这里有一个示例播放列表:http://www.muusical.com/playlists/programming-music
我认为我已经找到了重现错误的方法,以下是步骤:
- 播放YouTube托管的歌曲。
- 跳转到列表中的任何其他歌曲(无论是通过按跳过按钮还是直接按歌曲行项上的播放按钮)。
*请注意,如果播放列表中的第一首歌曲是YouTube歌曲,则即使不播放最初加载的YouTube歌曲,仅跳过到另一首歌曲也会产生错误。
基本上,一旦您加载和/或播放了YouTube歌曲并尝试跳转到另一首歌曲,该错误似乎就会发生。
如果您发现此行为的异常情况,请告诉我。
我在控制台中看到了这个错误:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.muusical.com') does not match the recipient window's origin ('http://www.muusical.com').
我使用Youtube的Javascript API来加载播放器:
new YT.Player('playlist-player', {
playerVars: { 'autoplay': 1, 'fs': 0 },
videoId: "gJ6APKIjFQY",
events: {
'onReady': @initPlayerControls,
'onStateChange': @onPlayerStateChange
}
})
这将生成以下iframe:
<iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/gJ6APKIjFQY?autoplay=1&enablejsapi=1&origin=http%3A%2F%2Fwww.muusical.com"></iframe>
点击上面的跳过按钮后,我在iframe中看到了以下加载的内容:
<iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src=""></iframe>
我支持YouTube、SoundCloud和Vimeo的歌曲。似乎一旦加载了YouTube歌曲,"origin"就会从http更改为https。我认为不必包含其他主机的嵌入方法,因为即使整个播放列表仅由YouTube组成,此错误也会发生,并且在仅由SoundCloud和Vimeo的歌曲组成的播放列表中不会发生。
此外,这是我加载YouTube JavaScript的方式:
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
如果您需要我澄清任何事情,请告诉我,感谢您的查看。