Manage key events using Youtube iframe API
I was looking for a solution on how to handle key events when a Youtube video starts in my application using the Youtube iframe API. unfortunately could not be found. Went through this documentation https://developers.google.com/youtube/iframe_api_reference#Events , but it looks like the player doesn't fire any key related event (ex: onkeydown, keypress, keyup).
I tried to add events directly to the provided code, but it didn't work.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('trailer_video', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
// 'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onkeydown': myfunction // custom event
}
});
}
Is it possible to handle key events in some way, especially when the arrow keys are pressed?
PS: I don't know if I could be wrong here, but usually when I press the arrow keys while the video is buffered, I see a chain of dots that give me a hint that the player is indeed detecting these events and responding.
UPDATE QUESTION
As follows from the option below, which by the way is a solution in a sense, but since Youtube also handles left and right arrow events, it can be used when the cursor is also over the video. My problem is how can I handle up and down events that are not handled by Youtube and that only work when the cursor is not over the video if I implement a custom event handler.
source to share
It depends on what you are trying to accomplish. But the answer to your question is, "Is there a way to handle key events, especially when the arrow keys are pressed?" Yes. Below is an example of a custom rewind / fast forward function that uses the left and right arrow keys:
https://jsfiddle.net/xoewzhcy/3/
<div id="video"></div>
function embedYouTubeVideo() {
player = new YT.Player('video', {
videoId: 'M7lc1UVf-VE'
});
}
function rewind() {
var currentTime = player.getCurrentTime();
player.seekTo(currentTime - 30, true);
player.playVideo();
}
function fastforward() {
var currentTime = player.getCurrentTime();
player.seekTo(currentTime + 30, true);
player.playVideo();
}
$(function(){
// embed the video
embedYouTubeVideo();
// bind events to the arrow keys
$(document).keydown(function(e) {
switch(e.which) {
case 37: // left (rewind)
rewind();
break;
case 39: // right (fast-forward)
fastforward();
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
});
NOTE. Keep track of when you focus on the embedded video (for example, you click the YouTube play button or click on the YouTube iframe in any way you want). Because your key events won't be listening, as the YouTube iframe is a completely separate window. To get around this, you can overlay a transparent div on the YouTube iframe and create your own play / pause buttons. This way, no one can click on the iframe and lose focus of the parent window.
Hope this helps!
source to share