时间戳

首页 > 解决方案 > Youtube iframe 没有响应 postMessage 命令

javascript - Youtube iframe 没有响应 postMessage 命令

问题描述

我正在尝试使用来自父级的 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 命令，因为视频会忽略它们。

我究竟做错了什么？

标签： javascriptiframeyoutubepostmessage

解决方案

我找到了解决方案。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() 命令。

推荐阅读