js: add support for keydown events (#678)

* js: add support for keydown events

This will modify the player behavior even if the player element is unfocused.

Based on the YouTube key bindings, allow to

- toggle playback with space and 'k' key
- increase and decrease player volume with up / down arrow key
- mute and unmute player with 'm' key
- jump forwards and backwards by 5 seconds with right / left arrow key
- jump forwards and backwards by 10 seconds with 'l' / 'j'  key
- set video progress with number keys 0–9
- toggle captions with 'c' key
- toggle fullscreen mode with 'f' key
- play next video with 'N' key
- increase and decrease playback speed with '>' / '<' key

* js: remove unused dependency 'videojs.hotkeys.min.js'

Support for controlling the player volume by scrolling over it is
still retained by copying over the relevant code part from the
aforementioned library.
This commit is contained in:
leonklingele 2019-08-16 23:01:14 +02:00 committed by Omar Roth
parent 7eaac995bd
commit e6b4e12689
5 changed files with 293 additions and 100 deletions

View file

@ -73,29 +73,33 @@ if (continue_button) {
continue_button.onclick = continue_autoplay;
}
function next_video() {
var url = new URL('https://example.com/watch?v=' + video_data.next_video);
if (video_data.params.autoplay || video_data.params.continue_autoplay) {
url.searchParams.set('autoplay', '1');
}
if (video_data.params.listen !== video_data.preferences.listen) {
url.searchParams.set('listen', video_data.params.listen);
}
if (video_data.params.speed !== video_data.preferences.speed) {
url.searchParams.set('speed', video_data.params.speed);
}
if (video_data.params.local !== video_data.preferences.local) {
url.searchParams.set('local', video_data.params.local);
}
url.searchParams.set('continue', '1');
location.assign(url.pathname + url.search);
}
function continue_autoplay(event) {
if (event.target.checked) {
player.on('ended', function () {
var url = new URL('https://example.com/watch?v=' + video_data.next_video);
if (video_data.params.autoplay || video_data.params.continue_autoplay) {
url.searchParams.set('autoplay', '1');
}
if (video_data.params.listen !== video_data.preferences.listen) {
url.searchParams.set('listen', video_data.params.listen);
}
if (video_data.params.speed !== video_data.preferences.speed) {
url.searchParams.set('speed', video_data.params.speed);
}
if (video_data.params.local !== video_data.preferences.local) {
url.searchParams.set('local', video_data.params.local);
}
url.searchParams.set('continue', '1');
location.assign(url.pathname + url.search);
next_video();
});
} else {
player.off('ended');