我如何将数据传递给onStateChange事件处理程序与Youtube iframe API
How can I pass data to the onStateChange event handler with Youtube iframe API
我正在为一个网站构建一个带有Javascript的小型视频播放器。我有一个JSON视频列表。我用
实例化我的播放器var Videoplayer = new myVideoPlayer(data);
因为列表包含来自Vimeo和YouTube的视频,我想在这个对象中处理这两个api。里面有如下函数:
setVideo(videoId)
选择并播放视频,或
markVideoAsSelected(video)
在html中添加类。到目前为止,一切都很顺利,但我现在遇到了困难。当我通过API加载YouTube播放器时,我添加了:
events : {
'onStateChange': self.YTonStateChange
}
我想要的一切都被绑定到Videoplayer实例我在开始创建。在状态更改时,我运行如下命令:
YTonStateChange : function(e){
var self = this
switch(e.data){
//Video ended code 0
case 0:
setTimeout(self.switchToNextVideo, 3000);
break;
}
}
:
this
现在绑定到YouTube API的事件,我丢失了我的对象。我不知道,我怎么能把我的对象实例与事件一起传递给事件处理程序?里面有我需要进一步处理的东西,我怎么才能把它找回来?
就像这样将上下文绑定到'self':
events : {
'onStateChange': self.YTonStateChange.bind(self)
}
它将在YTonStateChange回调中强制'this'值为'self'。希望有帮助;)
为了以防万一,除了R. Foubert之外,自ECMAScript 2015
以来还可以使用箭头函数:
YTonStateChange: e => {
switch(e?.data) {
case 0: {
setTimeout(this.switchToNextVideo, 3000);
return;
}
default:
break;
}
}
相关文章:
- keyup事件处理程序更改焦点不适用于快速键入
- 提示使用服务器端事件处理程序激活JavaScript
- 将事件处理程序绑定到任何可能的事件
- 正在将事件处理程序添加到不存在的类
- 在循环中附加事件处理程序时出现浏览器性能问题
- 在同一个javascript事件处理程序中调用不同的函数
- 有没有一种方法可以让内联事件处理程序在元素创建后立即执行
- 检查事件处理程序参数
- 实现延迟的jquery更改事件处理程序
- 如何使用Node.js在JavaScript模块文件之间使用事件处理程序
- 如何使jQuery的“bind”或“on”事件处理程序幂等
- 带有参数的Javascript事件处理程序
- Jquery事件处理程序仅适用于匿名函数
- 如何从另一个处理程序内部取消JavaScript事件处理程序函数的执行
- 如何在jQuery事件处理程序中存储和重用超时
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- 异步处理所有事件处理程序的方法
- jsplumb中的Click事件处理程序丢失“;这个“;对象
- 构造函数中的事件处理程序与构造函数外的事件处理函数的行为不同
- 如何在事件处理程序的回调中防止Default