YouTube iframe 不响应 postMessage 命令

2024-04-28

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

我究竟做错了什么?


我找到了解决方案。 YouTube 网址需要查询参数“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() 命令。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

YouTube iframe 不响应 postMessage 命令 的相关文章

  • 通过 HTTPS 加载页面但请求不安全的 XMLHttpRequest 端点

    我有一个页面 上面有一些 D3 javascript 该页面位于 HTTPS 网站内 但证书是自签名的 当我加载页面时 我的 D3 可视化效果不显示 并且出现错误 混合内容 页面位于 https integration jsite com
  • 选择多选选项最多 2 个

    我正在对不同主题使用多重选择 我想将选择限制为最多 2 个 并且如果用户取消选择 则以相同的方式禁用其他选项 同样 该选项必须可供用户使用
  • 开玩笑错误意外的令牌...(ES6)

    每当我在命令行中运行 jest 时 都会收到以下错误 Test suite failed to run Users
  • 在 JavaScript 中计算不包括周末和节假日的天数

    我正在尝试编写一个代码 其中将计算总天数 不包括周末和自定义假期 我通过 stackoverflow 和 adobe 论坛进行搜索以找到解决方案 并提供了以下代码 如果公共假期恰逢工作日 周六至周三 则不计算在内 我的问题是 如果公共假期落
  • 如何对像 Excel Pivot 这样两个键必须匹配的数组求和?

    我尝试对 Datum 和 Material 必须匹配的所有 Menge 和 Fehler 值求和 结果应类似于 Excel 数据透视表 到目前为止 这是我的代码 但我不知道如何添加也必须匹配的第二个键 Material 我希望你能理解我试图
  • AngularJS 服务并承诺最佳实践

    我有一个 AngularJS 应用程序services 调用 http资源并返回promise我在控制器中解决了这个问题 这是我正在做的事情的示例 app service Blog function http q var deferred
  • 如何将数据从 JavaScript 发送到 Python

    我正在 jinja2 和 python2 7 上使用 GAE 进行 Web 开发 我可以从Python获取数据 但我无法将数据从 JavaScript 发送到 Python 这是 JavaScript 代码 function toSave
  • 如何将 vue3-openlayers 插件添加到 nuxt

    我有以下 main ts 文件Vue3 https v3 vuejs org import createApp from vue import App from App vue How to do this in nuxt3 import
  • 从本地 html/javascript 网站插入 mySQL 数据库

    我正在尝试做什么 我的程序的目的是插入数据local HTML JS网站变成online 非本地 mySQL数据库 到目前为止我尝试过的 我试图用来实现此目的的原始方法是让我的本地网站使用 javascript 通过在线发布数据PHP文件
  • linkedin js 如何是有效的 javascript

    LinkedIn Javascript 集成是通过以下方式完成的 我不明白 这怎么是一个有效的javascript 为什么 api key 没有被引用 脚本标签的主体带有src永远不会被执行 但是 加载的脚本可以像访问任何其他元素的内容一样
  • 全日历与 UTC 和本地日期的混淆

    我确实让 fullcalendar 正常初始化 所以它代表当前日期 午夜 gt 午夜 1 天 1 小时时段 我从其他一些数据源获取带有时间戳的数据 格式为 YYYY MM DD HH mm 作为字符串传输 无时区信息 因此 我将该字符串转换
  • 如何在没有 jQuery 或延迟加载的情况下推迟背景图像

    根据帕特里克 塞克斯顿tutorial https varvy com pagespeed defer images html 我想以与这里相同的方式推迟背景图像img img src data image png base64 R0lGO
  • 如何在 Node.js 中打开 Windows-1255 编码文件?

    我有一个 Windows 1255 希伯来语 编码的文件 我希望能够在 Node js 中访问它 我尝试使用打开文件fs readFile 它给了我一个Buffer我无能为力 我尝试将编码设置为Windows 1255 但这没有被识别 我还
  • JavaScript 中的安全数据

    我必须为 Web 测试创建生成器 使用 HTML 和 JavaScript 测试必须离线和在线进行 正确答案和分数评估必须是生成的测试的一部分 最终用户的分数仅发送到服务器 无法在服务器上进行评估 并且服务器对问题一无所知 它只保存最终分数
  • 跟踪预防阻止了对 https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js 存储的访问

    大约一年半前 我使用 OfficeJS API 编写了一个 Excel 加载项 它一直工作到大约两周前 Excel 似乎已经进行了更新 现在我可以右键单击任务窗格并查看开发工具 而以前我无法做到这一点 并且必须运行外部 MS Edge 开发
  • 反转比例函数

    这对我来说很有趣 看下面的D3代码 var scale d3 scale linear domain 100 500 range 10 350 scale 100 Returns 10 scale 300 Returns 180 scale
  • 使用 NodeJS 创建 YouTube 播放列表

    我正在尝试使用 NodeJS 服务器创建 YouTube 播放列表 我已按照 Oauth 的 NodeJS 快速入门说明进行操作 如以下链接所示 https github com youtube api samples blob maste
  • JS - 如何将图像对象变成灰度并显示它

    基本上 当单击按钮时 它会告诉移动设备转到相机 一旦相机拍照 它就会给我图像数据 它被称为数据 URL 吗 这是我处理它的代码 var imagesrc data image jpeg base64 imageData var myimag
  • 如何将函数导入到Vue组件中?

    我正在尝试将单个函数导入到我的 Vue 组件中 我为我的函数创建了一个单独的 js 文件 randomId js exports randomId gt My function 在我的 Vue 组件中 我导入了 Random js let
  • 了解客户端文件的对象 URL 以及如何释放内存

    我在用createObjectURL获取本地图像文件的引用 URL 当我完成文件 图像后 我打电话revokeObjectURL释放该内存 一切对我来说都很好 但我只是想确保我释放了我能释放的所有内存 我检查后出现了我的担忧chrome b

随机推荐

  • 在标题中使用“/”时,如何防止列不显示在 WPF 数据网格中? [复制]

    这个问题在这里已经有答案了 我的应用程序中有一个 WPF Datagrid 我将 ItemSource 的值设置为我构建的 DataTable 的 DefaultView 问题在于 每当我将 DataTable 中的一列的 ColumnNa
  • 实体框架中的聚合根支持

    我们如何告诉实体框架骨料 http domaindrivendesign org node 88 保存聚合时 保存聚合内的实体 删除聚合时 删除聚合内的实体 当两个不同的用户尝试修改同一聚合中的两个不同实体时引发并发错误 加载聚合时 即使在
  • 如何将数据框列名称插入方程 R 中? [复制]

    这个问题在这里已经有答案了 我试图通过引用数据框列名称并将其插入方程而不是直接调用名称来使一段代码更加灵活 尽管我必须直接插入字段名称 但以下示例有效 require e1071 class c 0 25 0 34 0 55 field1
  • 如何获取网页上的超链接以在文本编辑器中打开文件(Sublime Text)

    我正在开发一个大型静态网站 Jekyll 并且希望能够单击浏览器 Chrome 中页面上的链接 这将在本地计算机 Sublime 上打开其相应的源文件 我可以获得文件的绝对链接 从控制台 Ubuntu 我可以这样做 subl path to
  • PHP 致命错误:参数解包后无法使用位置参数

    Goal 我想写一个函数可变数量的参数 使用 https secure php net manual en functions arguments php functions variable arg list new使用相同的参数和新的参
  • 获取特定包中的数据集列表

    我想获取控制台中显示的特定 R 包中所有数据集的列表 我知道这个函数data 将列出加载的包中的所有数据集 那不是我的目标 我想获取特定 R 包中所有数据集的列表 以下尝试不起作用 data data arules Warning mess
  • 在“无头模式”下运行虚拟操作系统意味着什么?

    我已经听到很多关于新版本的 VMWare Fusion 如何以 无头模式 运行虚拟操作系统的信息 谷歌搜索清楚地表明其他虚拟化产品也具有类似的功能 但是 我无法找到这实际上意味着什么的很好的描述 当你这样做时会发生什么 无头模式意味着虚拟机
  • PHP:删除任何扩展名的文件?

    当用户上传照片时 它会检查他们是否已经拥有一张照片 如果他们这样做 我希望它删除旧的 可以有任何扩展名 然后放入新的 有没有办法在不从数据库获取旧扩展的情况下做到这一点 目前的代码 del members gt prepare insert
  • 无法访问我的控制器/构造函数的输入

    我有一个简单的 Angular 2 组件 Input 我将其绑定到模板 模板显示输入数据 但我无法从构造函数访问它 import Component View bootstrap Input from angular2 angular2 i
  • 如何配置 IIS 以在 HTML5 模式下 URL 重写 AngularJS 应用程序?

    我有AngularJS 种子项目 https github com angular angular seed我已经添加了 locationProvider html5Mode true hashPrefix 到 app js 文件 我想配置
  • MSBuild 项目部署到本地文件夹并转换配置

    我在尝试找到正确的方法来使用 MSBuild 构建 Web 项目并输出仅包含可部署文件 即没有 cs csproj Debug config 等 但发布到本地文件夹的项目时遇到问题然后我可以通过 FTP RoboCopy 或其他方式 传输到
  • Haskell 错误:“非详尽模式”

    所以我有这个功能 当我尝试像这样使用它时 合并排序列表 1 1 1 1 它给了我一个错误 1 1 例外 SortFunctions hs 86 1 91 89 非详尽 函数 mergeSortedLists 中的模式 85 mergeSor
  • 如何向正在运行的 Linux 进程发送 Ctrl-Break?

    我正在调试在 Sun 的 JDK 1 4 2 18 上运行的应用程序中的内存泄漏 该版本似乎支持命令行参数 XX HeapDumpOnCtrlBreak 这可能会导致 JVM 在遇到控制中断时转储堆 如何将其发送到 Linux 机器上的后台
  • EnumChildWindows 还是 FindWindowEx?

    我可以选择使用 API EnumChildWindows 或 FindWindowEx 中的任何一个 有什么建议哪个 api 更注重性能 FindWindowEx 内部是否使用 EnumChildWindows 来获取特定窗口的句柄 这实际
  • 联合元素对齐

    如果我有一个联合 C 标准保证联合本身将与最大元素的大小对齐 union U long l int i short s char c 2 u 但对于工会内部各个工会成员的协调 它是怎么说的呢 下面的表达式能保证为真吗 u l u i u i
  • C++ STL 下一个排列与组合

    我知道我可以使用std next permutation在包含元素的某些容器上 1 2 3 这将生成该序列的 6 种排列 我想做的是给定一些设置 1 2 3 4 5 6 生成大小为 3 的所有可能的排列 因此对于这个例子 4 3 2 将是由
  • 如何在主活动中注册接收者? [复制]

    这个问题在这里已经有答案了 我有一个SmsReceiver我想在主活动中注册的类 我到底应该做什么 我是安卓新手 你可以做两件事 创建和定义BroadcastReceiver in the Manifest 创建并注册BroadcastRe
  • 获取 $_SERVER['AUTH_USER'] 的空白值

    我有一个在 Windows 2008 Server R2 上运行的 PHP 应用程序 它使用 PHP 的 LDAP 库根据 Active Directory 对用户进行身份验证 As per 这个答案 https stackoverflow
  • OCaml:如何运行包含库的脚本

    我正在按照 Real World OCaml 一书来学习 OCaml 许多程序都需要使用 Jane Street Core 库 当我在顶层使用这个核心库中的函数时 它工作得很好 在那里 我只需使用以下命令来打开 Core 库 use top
  • YouTube iframe 不响应 postMessage 命令

    我正在尝试使用来自父级的 postMessage 命令来控制 YouTube iframe 但它似乎不起作用 由于多种原因 我没有使用 YouTube API 只是使用带有 YouTube 嵌入视频的普通 iframe 我尝试发送命令的方式