Keyboard Shortcuts

Viewers like to have a comfortable video player where the features are easily accessible at familiar gestures. You might want to configure keyboard actions for your player. For example, you can have the player pause and play when spacebar is pressed. Left and right keys can be used to go forward and backward in time.

Starting with version 1.2.x, we have added a key-bindings feature which you can use to configure these in your video player.

Adding custom keyboard bindings

vdo.add({
  ...
  plugins: [{
    name: 'keyboard',
    options: {
      bindings: {
        'Space': (player) => (player.status === 1) ? player.pause() : player.play(),
        'Up' : (player) => player.setVolume(player.volume + 0.2),
        'Down' : (player) => player.setVolume(player.volume - 0.2),
        'Left': (player) => player.seek(player.currentTime - 20),
        'Right': (player) => player.seek(player.currentTime + 20),
      },
    }
  }]
})

Update 2021-05-09: An earlier version of this page referenced using default preset with the ability to change speed using Shift+] keys. This is no longer recommended due to conflicting keyboard shortcuts.

Limitations with the shortcuts

The above keyboard shortcuts only works when the video player is in focus. Clicking or interacting with the player keeps it in focus. Clicking on any outside element makes the player lose focus and above shortcuts will stop working until you mouse-click on the player again.

This keyboard plugin is not built for an immersive mode. It assumes there might be other videos in the webpage and other elements which might need to respond to keyboard. If the viewer clicks outside, video is no longer listening to keyboard events.

Building it yourself with API

If you have built your web application such that the video player is the most prominent element and is supposed to respond to keyboard events irrespective of current focus of user, we call this an immersive mode. In this setup, you should create your own event listeners on document.body and call API to trigger playback actions.

If you have multiple videos and you prefer that only the last interacted video should detect keyboard events: you should configure it with the DOM parent of the video container. Unless you have an immersive video experience, you should not listen to keyboard events in higher level DOM elements such as document or body.

Also, the keyboard plugin only binds to keydown event and has no provision for listening for other keyboard events. Triggering for other keyboard events is possible if you create your own keyboard listeners.