Keyboard Shortcuts

Viewers like to have a comfortable video player where the features are easily accessible at familiar positions. You might want to configure keyboard actions for your player. For example, you might want the player to pause and play when spacebar is pressed. Left and right keys might 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.

vdo.add({  ...  plugins: [{    name: 'keyboard',    options: {      preset: 'default'    }  }]})

Default is the name of a internal preset of keyboard bindings that is supposed to work in most cases and help you get setup quickly.

Adding custom keyboard bindings

vdo.add({  ...  plugins: [{    name: 'keyboard',    options: {      preset: 'default',      bindings: {        'Up' : (player) => player.setVolume(player.volume + 0.2),        'Down' : (player) => player.setVolume(player.volume - 0.2),      },    }  }]})

Default preset

'Space': (player) => (player.status === 1) ? player.pause() : player.play(),'}' : (player) => player.playbackRate += 0.2,'{' : (player) => player.playbackRate -= 0.2,'f' : (player) => player.fullscreen(!player.isFullscreen),'Left' : (player) => player.currentTime -= 20,'Right' : (player) => player.currentTime += 20,

Immersive mode video

If you have a mode in your web application where 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.

The keyboard plugin is not build for an immersive mode by default. It assumes there might be other videos in the webpage and other elements which might be need to respond to keyboard. If the viewer clicks outside, video is no longer able to listen to keyboard events.

The keyboard plugin creates a virtual container and keeps that in focus when it detects a click event. This container can listen to keyboard events when in focus. This way, keyboard events is captured only when the viewer has directly clicked on the video.

If you are trying to design an immersive mode application, you can always create your own event listeners on document.body and trigger playback actions. Get in touch with our support and we can assist you in the setup.

Controlling keyboard using API

Q. What if I directly bind the javascript keyboard events myself with VdoPlayer API?

If you are building a custom immersive experience for your users, this might be what you should be doing. However, in a standard embed of video player, it might cause issues when there are multiple player or when there are multiple widgets on the same page. To avoid such conflicts, the VdoPlayer configures it with the virtual container instead of the document body. This way, you can have multiple videos and only the last interacted video will detect keyboard events. You can do all this in javascript using our API.

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.

Unless you have an immersive video experience, you should not listen to keyboard events in higher level DOM elements such as document or body.