diff options
Diffstat (limited to 'javascript/videojs/sandbox/hotkeys.html.example')
| -rw-r--r-- | javascript/videojs/sandbox/hotkeys.html.example | 158 |
1 files changed, 158 insertions, 0 deletions
diff --git a/javascript/videojs/sandbox/hotkeys.html.example b/javascript/videojs/sandbox/hotkeys.html.example new file mode 100644 index 0000000..c279aff --- /dev/null +++ b/javascript/videojs/sandbox/hotkeys.html.example @@ -0,0 +1,158 @@ +<!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"> + <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> + </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"> + <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> + </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"> + <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> + </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"> + <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> + </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"> + <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> + </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> |