如何监听youtube iframe的音量变化?

2024-04-29

Here https://stackoverflow.com/a/17087006/4992248我找到了一个如何收听 YouTube iframe 的“播放\暂停”按钮的示例。

player.addEventListener('onStateChange', function(e) {
    console.log('State is:', e.data);
});

现在我需要听音量变化。 在 youtube 文档和here https://stackoverflow.com/questions/30068869/how-to-identify-volume-change-in-youtube-player我找到了一个方法player.getVolume(),但如果我想从 iframe 端获知音量变化,而不是从我这边询问 iframe,我不知道如何实现此方法。

在 YouTube 播放器演示页面上 https://developers.google.com/youtube/youtube_player_demo存在这样的功能(当我更改播放器的音量时,我会在行中看到适当的更改Volume, (0-100) [current level: **]),但两者都不是在文档中 https://developers.google.com/youtube/iframe_api_reference在互联网上我也找不到如何实现它。

我还尝试将上面提到的代码与onApiChange事件(我不清楚这个事件实际上做了什么),例如:

player.addEventListener('onApiChange', function(e) {
    console.log('onApiChange is:', e.data);
});

但控制台没有显示任何新内容。

player.getOptions(); shows Promise {<resolved>: Array(0)}.

谁能举个例子吗?


See 这个问题 https://stackoverflow.com/questions/65511523/how-to-listen-to-time-change-events-with-the-youtube-iframe-player-api/65511524#65511524.

你可以听postMessageIFrame 发出的事件仅对音量变化做出反应:

// Instantiate the Player.
function onYouTubeIframeAPIReady() {
  var player = new YT.Player("player", {
    height: "390",
    width: "640",
    videoId: "dQw4w9WgXcQ"
  });

  // This is the source "window" that will emit the events.
  var iframeWindow = player.getIframe().contentWindow;

  // Listen to events triggered by postMessage.
  window.addEventListener("message", function(event) {
    // Check that the event was sent from the YouTube IFrame.
    if (event.source === iframeWindow) {
      var data = JSON.parse(event.data);

      // The "infoDelivery" event is used by YT to transmit any
      // kind of information change in the player,
      // such as the current time or a volume change.
      if (
        data.event === "infoDelivery" &&
        data.info &&
        data.info.volume
      ) {
        console.log(data.info.volume); // there's also data.info.muted (a boolean)
      }
    }
  });
}

现场观看 https://codepen.io/zavan/pen/yLavMOw.

请注意,这依赖于私有 API,该 API 可能随时更改,恕不另行通知。

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

如何监听youtube iframe的音量变化? 的相关文章

  • 如何获取对象的所有属性?

    如何在 JavaScript 中使用反射获取对象的所有属性 循环遍历对象并获取属于该对象且不属于该对象的每个键 一个函数 var properties for var key in obj if obj hasOwnProperty key
  • 自动调整Google网站嵌入代码的高度(html)

    我正在使用 Google 协作平台嵌入 HTML 代码 将代码粘贴到 从网络嵌入 窗口中 输出的长度是可变的 我希望有一种方法可以动态调整父级的高度iframeGoogle 协作平台用于托管我的 HTML 我知道我可以使用 Google 协
  • 如何在 Firefox 控制台中访问附加内容脚本?

    我为 Firefox 和 Chrome 开发了一个插件 它有内容脚本 我想在浏览器选项卡的控制台中访问它们 在 Firefox 上网页控制台 https developer mozilla org en US docs Tools Web
  • pubnub 和 head.js

    有没有人成功整合过pubnub http www pubnub com 和 head js 正确吗 Pubnub http www pubnub com 希望我将他们的脚本放在页面底部并带有 div 就在它前面的标签 这可以确保在最后调用
  • Jasmine-jQuery loadFixtures 未定义

    我对整个茉莉花的事情仍然很陌生 在过去的几个小时里我陷入了这个问题 我尝试使用 loadFixture 加载外部夹具文件 我使用 Jasmine 2 0 0 和 Jasmine jQuery 2 0 5 ReferenceError loa
  • Javascript - 在加载所有图像后执行

    看了别人的问题我想 window onload 会回答我的问题 我已经尝试过这个 但它会在页面加载时立即执行代码 而不是在图像加载之后 如果有什么区别的话 图像来自 CDN 并且不是相对的 有人知道解决办法吗 我没有使用 jQuery 想要
  • Chrome 扩展同步调用 - 仅在窗口关闭后创建窗口

    我有这个代码 function voteNewWindow mailNum chrome windows create url http www google com incognito true function window conso
  • 启用/禁用由用户输入确定的复选框

    我有一个简单的表单 用户可以在其中输入他的联系号码 如果联系号码以 07 开头 则该复选框已启用 其他我需要禁用它的复选框 我已经编写了一些代码 但我面临的问题是 当用户键入 01 时 它会被禁用 但如果他们继续在 01 之后添加任何其他数
  • 如何在 HTML / Javascript 页面中插入 PHP 下拉列表

    好吧 这是我的第二篇文章 请接受我是一个完全的新手 愿意学习 花了很多时间在各个网站上寻找答案 而且我几乎已经到达了我需要到达的地方 至少在这一点上 我有一个网页 其中有许多 javascript 函数 这些函数一起使用 google 地图
  • 如何使用 Angular JS 单击时将 html 模板附加到 div/指令?

    我有这种情况
  • 通过JS Laravel访问存储目录

    有没有办法访问storage目录 该目录已经链接到publicJS 中的目录 我正在尝试制作一个上传图片的表单 验证脚本 if request gt hasFile photos marker gt photos request gt ph
  • 在 jQuery 可排序中对多个选定项目进行排序?

    我试图在 jQuery 可排序集中选择多个项目 然后将选定的项目一起移动 这是我的弱点开始尝试使其发挥作用 http jsfiddle net benstenson CgD8Y 这是代码 HTML div class container d
  • 了解 JavaScript - 资源

    使用 StackOverflow 的微型 Digit Blog 功能进行描述here https stackoverflow com about 我想发布以下我刚刚看到的 我觉得很有趣的谷歌技术谈话视频 我一直在理解 javascript
  • ToggleClass 动画 jQuery?

    我的网站上有一个部分 当用户单击时我希望它展开 我正在使用 jQuerytoggleClass为了这 expandable function e e preventDefault this closest article toggleCla
  • 在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

    Goal 将一个对象 水平和垂直 置于另一个对象 矩形或组 的中心canvas via Fabric js或者通过Javascript保持原始对象的长宽比相同 但也不超过父对象的宽度 高度比例 父对象 矩形或组 不会居中于canvas元素
  • 从 DirectionsRenderer 中获取折线或标记的事件

    我正在使用 DirectionsService 和路线方法来生成 DirectionsResult 我还使用 DirectionsRenderer 对象来显示结果 因为它非常易于使用 我在检测 Directions changed 事件时没
  • JavaScript 数组扩展语法的时间复杂度是多少?

    我想知道在 JavaScript 中使用数组扩展的时间复杂度是多少 是线性 O n 还是常数 O 1 下面的语法示例 let lar Math max nums 传播称为 Symbol iterator 有关对象的属性 对于数组 这将迭代数
  • mozilla pdf.js 没有全视图

    我喜欢这个 pdf 查看器https github com mozilla pdf js https github com mozilla pdf js Demo http mozilla github com pdf js web vie
  • Node.js - 重载函数

    有没有一种方法可以重载node js中的函数 类似于 noSuchMethod https developer mozilla org en JavaScript Reference Global Objects Object noSuch
  • 无法使用 HTML 设置未定义 jQuery UI 自动完成的属性“_renderItem”

    我使用以下代码将 jQuery UI 自动完成项呈现为 HTML 这些项目在自动完成控件中正确呈现 但我不断收到此 JavaScript 错误并且无法移动过去 Firefox 无法转换 JavaScript 参数 Chrome 无法设置未定

随机推荐

  • 如何使用ggplot2在地图上添加经度和纬度线?

    我现在正在使用绘制加拿大地图ggplot2 因为默认的投影方式是 aea 阿尔伯斯等积 所以地图上的经度和纬度都是直线 我想知道如何在地图上以 110W 100W 90W 和 50N 60N 70N 的形式显示经度和纬度 它们应该是曲线 多
  • 如何使用rest-api执行spring cloud任务

    我知道可以安排云任务 也可以使用要执行的流进行配置 作为一名开发人员 我想使用 Rest api 执行我的 Spring Cloud 任务 以便我可以按需执行任务 基本上我有一个工作流程管理系统 我们正在使用 control m 代理 所以
  • 如何使用 Gmail API、OAuth2 for Apps 脚本和域范围委派为 G Suite 域中的用户设置电子邮件签名

    这是我之前发布的问题 答案的后续内容 如何使用 Google 电子邮件设置 API 和 OAuth2 for Apps 脚本库为 Google Apps 域中的用户设置电子邮件签名 https stackoverflow com quest
  • 为什么模拟“open”并返回 FileNotFoundError 会引发 AttributeError: __exit__?

    通过模拟测试open with a FileNotFoundError raises AttributeError exit 为什么会发生这种情况以及我可以采取什么措施来解决它 以下代码打开一个简单的文本文件 如果文件丢失 它会生成一个默认
  • 直接从令牌获取 JWT 声明,ASP Net Core 2.1

    我正在开发 ASP Net Core 2 1 Web API 我已经在我的项目中成功实施了 JWT 有了授权一切都可以正常工作 通常 当我需要用户声明时 我知道我可以这样获取它们 例如电子邮件声明 var claimsIdentity Us
  • 解决加载解决方案时 Visual Studio 2008 崩溃的问题

    我已经通过 SVN 下载了 SubSonic 的源代码 当我尝试在 Visual Studio 2008 中打开该项目时 它会转换解决方案 加载所有项目 然后消失 并且不会出现错误消息 解决方案的后续加载也会执行相同的操作 如果我运行 de
  • 将度/分/秒转换为十进制坐标

    在我的代码的一部分中 我将十进制坐标转换为度 分 秒 然后使用 double coord 59 345235 int sec int Math Round coord 3600 int deg sec 3600 sec Math Abs s
  • 如何使用 EF 和数据注释使输入字段仅允许数字?

    我试图弄清楚是否有一种方法可以确保使用数据注释和实体框架仅允许数字输入 我正在使用以下代码 Required DisplayName Client No Column client no TypeName smallint public v
  • 如何在 DirectShow 或 Media Foundation 中拍摄静态照片

    有没有办法使用 DirectShow 或 Media Foundation API 制作照片 静态图像 我的视频捕捉工作正常 我可以捕捉第一帧并收工 但这不是照片 通常相机具有不同的视频和照片模式 其中照片模式可提供更高的分辨率 例如 我有
  • 如何在 html 助手中使用 asp.net mvc 3 razor 执行内联样式

    我想做这个 Html TextBoxFor x gt x BackgroundColor new style width 20px background color Model BackgroundColor 然而它不会渲染我的 Mode
  • 如何从android中的另一个应用程序资源更改主题?

    我知道有一种方法可以通过在 styles xml 中定义并像这样使用它来设置主题 setTheme android R style MyTheme 但是 我想从我开发的另一个应用程序中获取主题 我知道资源名称 实际上我可以使用此代码块获取主
  • Windows EventLog:它的操作速度有多快?

    我有一个服务应用程序 它通过 TCP 处理客户端请求并将任何事件写入 Windows EventLog 由于该应用程序预计会在短时间内为许多客户端和每个客户端的大量请求提供服务 假设每秒 1 到 50 个请求 因此我很想知道密集程度 CPU
  • 快速查询listobject vba的方法

    我使用 Excel 2016 需要从列表对象中获取值 有几列 例如三 我需要获取column1中的值 其中column2 smth column3 smth 我怎样才能快速做到这一点 如果您想要 VBA 中的 SQL 语法和速度 那么您需要
  • 在 Angular 2 中动态更改 DatePipe 的区域设置

    我正在制作一个 Angular 项目 用户可以在其中切换语言 是否可以使语言环境动态化 我看到你可以将它添加到 NgModule 中 但我猜当我把它放在那里时它不是动态的 或者我可以通过服务或其他方式更改它吗 要从服务设置区域设置 您需要添
  • 是否可以从 XML 文件动态更改资源?

    我希望能够轻松更改应用程序的 UI 外观 颜色和徽标 并想询问是否有人对如何最好地做到这一点有任何建议 我想要的只是在编译项目中替换 XML 文件并将资源 即 colors xml 中的颜色值 设置为 XML 的值 唯一的问题似乎是无法在运
  • 在数组中查找距用户位置最近的经度和纬度

    我有一个充满经度和纬度的数组 我的用户位置有两个双变量 我想根据我的阵列测试用户位置之间的距离 看看哪个位置最近 我该怎么做呢 这将得到两个位置之间的距离 但很难理解 我如何针对一系列位置对其进行测试 CLLocation startLoc
  • 使用CSS框架的好处[重复]

    这个问题在这里已经有答案了 可能的重复 最好的 CSS 框架是什么 它们值得付出努力吗 https stackoverflow com questions 203069 what is the best css framework and
  • iTunes connect - 在哪里可以查看 TestFlight 版本的崩溃报告?

    我有一个应用程序正在 iTunes 连接上通过 TestFlight 进行测试 其中一台测试设备不断崩溃 我很确定 itunes connect 上应该有崩溃日志 但我在 testflight 版本中找不到任何崩溃日志 有谁知道在哪里可以找
  • Lambda函数检查特定标签是否不存在-​​python

    我正在尝试以下内容 获取满足以下任一条件的所有 EC2 实例 被标记为标签所有者和值未知或未知 缺少标签所有者 我能够完成 1 但不知道如何实现 2 import boto3 import collections import dateti
  • 如何监听youtube iframe的音量变化?

    Here https stackoverflow com a 17087006 4992248我找到了一个如何收听 YouTube iframe 的 播放 暂停 按钮的示例 player addEventListener onStateCh