YouTube API-动态添加事件侦听器
YouTube API - Dynamically add event listeners
我正在使用Youtube API来重新设计动态添加到页面中的嵌入式视频的样式。
我很难弄清楚如何设置自定义控件。每个视频嵌入都有一个自定义控件,该控件需要在相关嵌入上启动playVideo()
函数。
当每个播放器初始化时,它会启动onPlayerReady功能。我的问题是,我不知道如何将点击事件绑定到新玩家自定义按钮,该按钮将为正确的玩家启动playVideo()
功能。
我在这里做了很多搜索,找不到使用多个嵌入的参考。
最终更新
由于jQuery是可用的,我在这个解决方案中使用它。。。
function onPlayerReady(event) {
// bind events
var playButton = $(event.target.c).parent().find('.immersive-video__play');
playButton.on('click', function() {
event.target.playVideo();
});
}
更新
这是我目前的工作解决方案。。。
var buttonCount = 0;
function onPlayerReady(event) {
// bind events
var playButtons = document.getElementsByClassName("immersive-video__play");
playButtons[buttonCount].addEventListener('click', function() {
event.target.playVideo();
});
buttonCount++;
}
原件
function onPlayerReady(event) {
// bind event
var playButtons = document.getElementsByClassName("immersive-video__play");
// I don't know how to link the button to the player?
playButtons[].addEventListener('click', function() {
player[].playVideo();
});
}
var player = [];
function checkYT() {
var check = setInterval(function() {
if (typeof YT !== 'undefined' && typeof YT.Player !== 'undefined') {
var tar = document.getElementsByClassName('immersive-video__embed');
for (var i = 0; i < tar.length; i++) {
var id = tar[i].dataset.video;
var container = document.getElementsByClassName('video-holder');
player[i] = new YT.Player(container[i], {
videoId: id,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
clearInterval(check);
return;
} else {
console.log('not ready');
}
}, 20);
}
确保iframe src
URL的末尾有?enablejsapi=1
,如下所示:
<iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video"></iframe>
将参数值设置为1可以通过IFrame或JavaScriptPlayerneneneba API调用控制播放器。默认值为0,这意味着不能使用这些API控制播放器。
检查您的Player对象,该对象能够控制该视频。使用该iframe上的id
属性创建它。以下是本教程中的一个示例:
var player;
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
player = new YT.Player('video', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady
}
});
}
然后检查"播放器就绪"回调和绑定事件。它将自动传递给事件对象,其中event.target
是玩家。
function onPlayerReady(event) {
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
}
希望这能有所帮助!
相关文章:
- 如何在for循环中添加事件侦听器
- 未命中服务器发送的事件侦听器
- 如何覆盖原型中的事件侦听器
- 无法将事件侦听器附加到画布
- 如何在d3.js中自定义事件侦听器
- 在es6中,将带有回调的事件侦听器设置为可迭代的
- 事件侦听器未在chrome扩展中的options.js中启动
- IE8更改文本区域上的事件侦听器不工作
- 将事件侦听器添加到文档,而不是签入元素存在,然后添加事件侦听器
- javascript删除事件侦听器
- 我应该/如何清除mousemove JQuery事件侦听器
- 在JQuery中使用谷歌地图Api事件/侦听器
- 如何使用我的Jquery代码创建委托事件侦听器
- 'mousemove'画布中的事件侦听器-指针仅在最后一个矩形中更改
- 为什么此事件侦听器不工作
- 是否可以在数字输入框中的小按钮中添加事件侦听器
- 在Google Chrome扩展中添加事件侦听器
- SVG元素在转换后会丢失事件侦听器
- jQuery事件侦听器多次启动
- 如何在不删除类似侦听器的情况下从父对象中删除jQuery事件侦听器