feat: add hotkeys support ("m", "f", "k", and Space) (#5571)
Extend keyboard support for the SeekBar, and pass unhandled keydown events from components back to the player.
Switch from raw keycodes to the keycode module.
Using `userActions.hotkeys`, which can either be a function to match the hotkeys plugin, or an object with properties like `fullscreenKey`, see the documentation for more info.
This is currently off by default, we will consider turning it on by default in the future, see #5765.
Fixes #4048, fixes #3022.
2019-01-25 21:10:29 +02:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js Hotkeys - Sandbox</title>
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
<script src="../dist/video.js"></script>
<style>
.hotkeys-function { background: #FF6961; }
.hotkeys-override { background: #77DD77; }
.hotkeys-normal { background: #AEC6CF; }
.video-js {
height: 150px;
width: 300px;
}
.wrapper {
display: grid;
margin: 0 auto;
grid-gap: 10px;
grid-template-columns: 300px 300px 300px;
}
.panel > p:first-child {
border-bottom: black 1px solid;
}
</style>
</head>
<body>
<h1>Video.js Hotkeys</h1>
<p>All the various ways to configure hotkeys.</p>
<div class="wrapper">
<div class="panel hotkeys-normal">
<p>Default (no) hotkeys</p>
<video-js
id="vid0"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
2020-11-16 22:13:27 +02:00
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
feat: add hotkeys support ("m", "f", "k", and Space) (#5571)
Extend keyboard support for the SeekBar, and pass unhandled keydown events from components back to the player.
Switch from raw keycodes to the keycode module.
Using `userActions.hotkeys`, which can either be a function to match the hotkeys plugin, or an object with properties like `fullscreenKey`, see the documentation for more info.
This is currently off by default, we will consider turning it on by default in the future, see #5765.
Fixes #4048, fixes #3022.
2019-01-25 21:10:29 +02:00
</video-js>
</div>
<div class="panel hotkeys-normal">
<p>Disable hotkeys</p>
<video-js
id="vid1"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
2020-11-16 22:13:27 +02:00
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
feat: add hotkeys support ("m", "f", "k", and Space) (#5571)
Extend keyboard support for the SeekBar, and pass unhandled keydown events from components back to the player.
Switch from raw keycodes to the keycode module.
Using `userActions.hotkeys`, which can either be a function to match the hotkeys plugin, or an object with properties like `fullscreenKey`, see the documentation for more info.
This is currently off by default, we will consider turning it on by default in the future, see #5765.
Fixes #4048, fixes #3022.
2019-01-25 21:10:29 +02:00
</video-js>
</div>
<div class="panel hotkeys-normal">
<p>Enable default hotkeys (k = play/pause, m = mute/unmute, f = fullscreen)</p>
<video-js
id="vid12"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
2020-11-16 22:13:27 +02:00
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
feat: add hotkeys support ("m", "f", "k", and Space) (#5571)
Extend keyboard support for the SeekBar, and pass unhandled keydown events from components back to the player.
Switch from raw keycodes to the keycode module.
Using `userActions.hotkeys`, which can either be a function to match the hotkeys plugin, or an object with properties like `fullscreenKey`, see the documentation for more info.
This is currently off by default, we will consider turning it on by default in the future, see #5765.
Fixes #4048, fixes #3022.
2019-01-25 21:10:29 +02:00
</video-js>
</div>
<div class="panel hotkeys-function">
<p>Custom hotkey function (x = pause, y = play)</p>
<video-js
id="vid2"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
2020-11-16 22:13:27 +02:00
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
feat: add hotkeys support ("m", "f", "k", and Space) (#5571)
Extend keyboard support for the SeekBar, and pass unhandled keydown events from components back to the player.
Switch from raw keycodes to the keycode module.
Using `userActions.hotkeys`, which can either be a function to match the hotkeys plugin, or an object with properties like `fullscreenKey`, see the documentation for more info.
This is currently off by default, we will consider turning it on by default in the future, see #5765.
Fixes #4048, fixes #3022.
2019-01-25 21:10:29 +02:00
</video-js>
</div>
<div class="panel hotkeys-override">
<p>Customize specific hotkeys (z = play/pause, v = fullscreen)</p>
<video-js
id="vid3"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
2020-11-16 22:13:27 +02:00
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
feat: add hotkeys support ("m", "f", "k", and Space) (#5571)
Extend keyboard support for the SeekBar, and pass unhandled keydown events from components back to the player.
Switch from raw keycodes to the keycode module.
Using `userActions.hotkeys`, which can either be a function to match the hotkeys plugin, or an object with properties like `fullscreenKey`, see the documentation for more info.
This is currently off by default, we will consider turning it on by default in the future, see #5765.
Fixes #4048, fixes #3022.
2019-01-25 21:10:29 +02:00
</video-js>
</div>
</div>
<script>
var player0 = videojs('vid0', {});
// Note that we support both explicitly disbling and explicitly enabling Hotkeys
// because one day the default may change from disabled to enabled.
var player1 = videojs('vid1', {
userActions: {
hotkeys: false
}
});
var player12 = videojs('vid12', {
userActions: {
hotkeys: true
}
});
var player2 = videojs('vid2', {
userActions: {
hotkeys: function(event) {
// `this` is the player in this context
// `x` key = pause
if (event.which === 88) {
this.pause();
}
// `y` key = play
if (event.which === 89) {
this.play();
}
}
}
});
var player3 = videojs('vid3', {
userActions: {
hotkeys: {
playPauseKey: function(event) {
// override play/pause to trigger when pressing the z key
return (event.which === 90);
},
muteKey: function(event) {
// disable mute key
},
fullscreenKey: function(event) {
// override fullscreen to trigger when pressing the v key
return (event.which === 86);
}
}
}
});
</script>
</body>
</html>
