在 youtube api 中检测播放事件

2024-04-25

我正在寻找一种通过 Javascript 检测嵌入 Youtube 视频中的播放事件的方法。现在我能够检测到状态更改,但我不知道如何在之后解除事件绑定并触发另一个事件来表明它已完成。我也不想使用 add/removeEventListener 因为我猜 IE8 及以下版本没有此功能。

到目前为止我的代码,

    function onYouTubePlayerReady(playerId) {
    console.log('loaded');
    var ytPlayer = document.getElementById(playerId);
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    console.log("Player's new state: " + newState);
    if(newState === 1) {
        sendYtUrl();
     }
}

function sendYtUrl() {
    console.log('play detected');
    ytplayer.removeEventListener("onStateChange");
} 

我希望弹出 sendYtUrl,删除侦听器,然后执行我需要执行的操作,或者更好的是,保持其简洁并将其保留在同一函数中。

提前致谢!


您不必解绑onStateChange event https://developers.google.com/youtube/js_api_reference#Events了解视频何时结束或完成。这onStateChange只需要一个事件监听器。每次发生这些情况时,它将被触发并返回以下状态:

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued)

在你的函数中onytplayerStateChange, 加上另一个if视频完成时捕获的语句:

function onytplayerStateChange(newState) {
    console.log("Player's new state: " + newState);
    if(newState === 1) {
        sendYtUrl();
    } else if(newState === 0) {
        console.log("Video has ended!");
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 youtube api 中检测播放事件 的相关文章

  • 如何将Javascript代码转换为Jquery代码?

    请帮助我 这是Javascript代码 我需要将此代码更改为Jquery eval parent document forms 0 strKey intDimensionId value strIds intDimensionId 高性能
  • 量角器未连接到 DevTools

    当我的页面从 Protractor 运行时 如何使用 Chrome 开发者工具来检查它 当我尝试打开开发工具时 我从量角器收到此错误 UnknownError disconnected not connected to DevTools S
  • Select2 基本示例不起作用

    我想得到select2使用 symfony2 脚本的库 我正在尝试实现提供的基本示例https select2 github io examples html https select2 github io examples html pa
  • 如何使用 JS 和 Chrome 控制台向频道发送 Discord 消息?

    如何使用 JS 和 Chrome 控制台在不使用 Discord API 的情况下将 Discord 消息发送到 Discord 频道 看来这是不可能的事了 打开不和谐控制台 ctrl shift i 不起作用 请参阅下面的编辑 然后进入网
  • 如何在 d3.scale.ordinal() 中指定域?

    var W 100 var H 200 var data v 4 v 8 v 15 v 16 v 23 v 42 var x d3 scale linear domain 0 max x range 0 W var y d3 scale o
  • Redux 中的排队操作

    我目前遇到的情况是我需要连续运行 Redux Actions 我看过各种中间件 比如 redux promise 看起来不错如果您知道触发根操作 由于缺乏更好的术语 时的连续操作是什么 本质上 我想维护一个可以随时添加的操作队列 每个对象在
  • 在 TypeScript 中使用三个 Js + OrbitControl

    我无法得到this http www example com 在 TypeScript 中使用上述组合的示例 I have and 在我的html中和打字稿文件
  • 解码URIComponent抛出错误“URI格式错误”

    As unescape已被弃用 我已选择decodeURIComponent 但它没有按预期工作 decodeURIComponent无法解码以下 URI 组件 Coast 20Guard 20Academy 20to 20hold 20a
  • Javascript,检测触摸设备

    我正在使用此函数来检测设备是否是触摸设备 function is touch device return ontouchstart in window onmsgesturechange in window 从这里得到这个功能 使用 Jav
  • 在 Java、Android 上从 Youtube 下载视频的代码

    我创建了从 Youtube 下载视频的代码 但此代码不适用于 Wi fi 连接 但适用于移动连接 我哪里有错误 import java io File import java io FileOutputStream import java
  • PHP/Web 脚本保护

    我想用 PHP 和 javascript 编写一个脚本 并以某种方式保护我的源代码 以便我可以出售我的脚本 我正在寻找如何保护我的脚本的想法 如果我将其出售给某人 我如何阻止该人将其作为他们的产品重新分发 我知道有ZEND和ionCube
  • 使用Ajax使用php将记录插入mysql数据库

    如何使用 Ajax 对此代码进行编码 请帮助 我是 Bignner 我已经编写了这段代码 它可以工作 但我想与 ajax 一起使用 因为不想重新加载页面 PHP文件 Code For Making Form And getting Data
  • 有人可以解释以下涉及 Javascript 对象的双重赋值吗?

    这个问题在这里已经有答案了 var foo n 1 var bar foo foo x foo n 2 console log foo n 2 console log bar n 1 x n 2 有人能解释一下第三行发生了什么吗 线路foo
  • 如何避免JQuery和Prototype之间的冲突

    如果一个页面同时具有 JQuery 和 Prototype 那么我就会遇到冲突 有一个选项可以禁用 JQuery 的 符号 因此不会发生冲突 但是我必须使用关键字 JQuery 而不是 我想知道Prototype是否有任何选项可以解决这个冲
  • 图像处理编程

    我想知道是否有任何方法可以使用某种编程语言检测图像中对象的位置 例如 如果我有一个球的图像 每 100 毫秒更新一次 是否可以通过某些程序使用某些东西来获取球的坐标 看一下OpenCV http opencv willowgarage co
  • 0x800a138f - JavaScript 运行时错误:无法获取未定义或 null 引用的属性“值”

    我编写了一段 JavaScript 代码来比较 2 个文本框中的 2 个日期 function CompareDates var fdate document getElementById txtFromDate var edate doc
  • Jquery UI:日期选择器。如何通过 $_GET 在日期选择器中设置日期

    我找不到如何设置 GET 变量来手动设置日期选择器中的日期 http jqueryui com demos datepicker http jqueryui com demos datepicker 例子 那可能吗 Thanks 在此使用
  • 如何从 Backbone 集合中提取多个属性?

    我试图从 Backbone 集合中提取多个属性 但它返回undefined 收藏 id 1 name raju age 23 sex male hobbies id 2 name ramesh age 43 sex male hobbies
  • 如何获取firestore集合下的文档数量? [复制]

    这个问题在这里已经有答案了 我想获取 firestore 集合中的文档总数 我正在制作一个论坛应用程序 所以我想显示每个讨论中当前的评论量 有类似的东西db collection comments get lenght或类似的东西 随着si
  • JavaScript Intellisense 在 Visual Studio 2015 中不起作用

    我知道这个问题在网上以及整个网络上都有很多重复的问题 不幸的是 所提出的建议都不起作用 除了重新安装 VS 15 之外 我已经完成了所有操作 如果我可以帮助的话 我宁愿不这样做 我去过的一个网站 references js 背后的故事 ht

随机推荐