Youtube iframe 不响应 postMessage 命令

Question

我正在尝试使用父级的 postMessage 命令控制 YouTube iframe，但它似乎不起作用。

出于多种原因，我没有使用 YouTube API，只是使用带有 YouTube 嵌入式视频的普通 iframe。

<iframe id="video-player" :src="'https://www.youtube.com/embed/' + code + '?autoplay=1'"
  seamless sandbox="allow-scripts allow-same-origin allow-presentation"></iframe>

我尝试发送命令的方式是：

var iframe = document.getElementById('video-player');
iframe.contentWindow.postMessage(JSON.stringify(
  { event: 'command', func: 'pauseVideo' }), 'https://www.youtube.com');

似乎正确选择了 iframe，但我不确定是否发送了 postMessage 命令，因为视频忽略了它们。

¿我做错了什么？

Answer 1

我找到了解决方案。 YouTube url 需要查询参数 "enablejsapi=1"。

<iframe id="video-player" :src="'https://www.youtube.com/embed/' + code + '?autoplay=1&enablejsapi=1'"
  seamless sandbox="allow-scripts allow-same-origin allow-presentation"></iframe>

像这样它可以正确地监听 postMessage() 命令。

Answer 2

如果以后有人遇到这个问题，以这种方式开始播放视频可能不再有效。虽然它在 Firefox 和 Safari 中有效，但在 Chrome 中不再有效。他们可能改变了一些安全机制。

Chrome 仅在用户与视频互动后对发布的消息起作用。

要为 Chrome 修复它，您必须添加值为“自动播放”的“允许”属性

<iframe src="'https://www.youtube.com/embed/' + code + '?enablejsapi=1'" allow="autoplay"></iframe>

Youtube iframe 不响应 postMessage 命令

Youtube iframe not responding to postMessage commands

javascript

youtube

iframe

postmessage