admin管理员组

文章数量:1417709

I was looking for a solution on how to handle key events when running Youtube videos on my application using Youtube iframe API. unfortunately couldn't find any. Did went through this documentation but it seems player doesn't fire any event related to key ( ex: onkeydown, keypress, keyup ).

I tried adding events directly to the provided code but it didnt worked.

 var tag = document.createElement('script');

      tag.src = "";
      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 there any way I can handle key events specially when Arrow keys are pressed ?.

P.S: I dont know I might be wrong here but usually when i press Arrow keys while video is buffering, i see chain of dots moving which gives me a hint, that the player does detects these events and responds.

UPDATE QUESTION

As answer below suggests which is ofcourse a solution in a way but since Youtube also handles left and right arrow key events its possible to use when cursor is over the video as well, My concern is, how can i handle the events for up and down arrow key which are not getting handled by Youtube and which only works when cursor is not over the video if I implement a custom event handler.

I was looking for a solution on how to handle key events when running Youtube videos on my application using Youtube iframe API. unfortunately couldn't find any. Did went through this documentation https://developers.google./youtube/iframe_api_reference#Events but it seems player doesn't fire any event related to key ( ex: onkeydown, keypress, keyup ).

I tried adding events directly to the provided code but it didnt worked.

 var tag = document.createElement('script');

      tag.src = "https://www.youtube./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 there any way I can handle key events specially when Arrow keys are pressed ?.

P.S: I dont know I might be wrong here but usually when i press Arrow keys while video is buffering, i see chain of dots moving which gives me a hint, that the player does detects these events and responds.

UPDATE QUESTION

As answer below suggests which is ofcourse a solution in a way but since Youtube also handles left and right arrow key events its possible to use when cursor is over the video as well, My concern is, how can i handle the events for up and down arrow key which are not getting handled by Youtube and which only works when cursor is not over the video if I implement a custom event handler.

• javascript
• youtube-api
• youtube-iframe-api

Share Improve this question Follow edited Jun 8, 2015 at 13:13 Abhinay asked Jun 7, 2015 at 8:14 AbhinayAbhinay 1,81644 gold badges2929 silver badges5454 bronze badges 1

• Can someone point me to some doc even. Youtube says their developers are here to answer every question related to this tag but doesn't seems correct. – Abhinay Commented Jun 7, 2015 at 19:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

It depends on what you are trying to acplish. But the answer to your question, "Is there any way I can handle key events specially when Arrow keys are pressed?" is yes. Here is an example of a custom rewind/fast-forward functionality that uses the left and right arrow keys:

https://jsfiddle/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: Watch out for when you're focused on the embedded video (i.e., you click the YouTube play button or click into the YouTube iframe in any way). Because, your key events won't be listened to since the YouTube iframe is a pletely separate window. To get around this, you could overlay a transparent div on the YouTube iframe and build your own play/pause buttons. That way no one can ever click into the iframe and lose focus of the parent window.

I hope this helps!

本文标签： javascriptHandle key events when using Youtube iframe APIStack Overflow