Skip to content

Commit 18be6ba

Browse files
sinarusinaru
committed
Add sandbox example for global hotkeys
1 parent c377e17 commit 18be6ba

File tree

1 file changed

+118
-0
lines changed

1 file changed

+118
-0
lines changed

‎sandbox/global-hotkeys.html.example‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Video.js Sandbox</title>
6+
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
7+
<script src="../dist/video.js"></script>
8+
</head>
9+
<body>
10+
<div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
11+
<p>Focus outside the player (e.g. click anywhere in the page) and press a hotkey (e.g. space bar).
12+
The player hotkey should trigger and perform the action.</p>
13+
<p>By setting <code>globalHotkeys: true</code> extends the normal hotkey behavior at the global level. Therefore <code>hotkeys: true</code> also need to be set.</p>
14+
<p>Note that if the focus is on an interactive element in the page, the global hotkey behavior would not trigger.</p>
15+
</div>
16+
17+
<div>
18+
<h2>Player</h2>
19+
<video-js
20+
id="vid1"
21+
controls
22+
preload="auto"
23+
width="640"
24+
height="264"
25+
poster="https://vjs.zencdn.net/v/oceans.png">
26+
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
27+
<source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
28+
<source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
29+
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
30+
<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>
31+
</video-js>
32+
33+
<script>
34+
var player = videojs('vid1', {
35+
userActions: {
36+
globalHotkeys: true,
37+
hotkeys: true
38+
}
39+
});
40+
player.log('window.player created', player);
41+
</script>
42+
</div>
43+
44+
<div id="test-interactive-area" style="margin-top: 50px">
45+
<h2>Test Interactive Area</h2>
46+
47+
<div>
48+
<label for="sample-input">Sample Input:</label>
49+
<input id="sample-input" type="text" name="foo" value="bar">
50+
</div>
51+
52+
<div>
53+
<label for="sample-password">Password:</label>
54+
<input id="sample-password" type="password" name="password">
55+
</div>
56+
57+
<div>
58+
<label for="sample-checkbox">
59+
<input id="sample-checkbox" type="checkbox"> Check me
60+
</label>
61+
</div>
62+
63+
<div>
64+
<label for="sample-radio1">
65+
<input id="sample-radio1" type="radio" name="sample-radio" value="option1"> Option 1
66+
</label>
67+
<label for="sample-radio2">
68+
<input id="sample-radio2" type="radio" name="sample-radio" value="option2"> Option 2
69+
</label>
70+
</div>
71+
72+
<div>
73+
<label for="sample-select">Choose an option:</label>
74+
<select id="sample-select">
75+
<option value="1">Option 1</option>
76+
<option value="2">Option 2</option>
77+
<option value="3">Option 3</option>
78+
</select>
79+
</div>
80+
81+
<div>
82+
<label for="sample-textarea">Sample Textarea:</label>
83+
<textarea id="sample-textarea" rows="4" cols="50">This is a sample textarea with some test content.</textarea>
84+
</div>
85+
86+
<div>
87+
<label for="sample-range">Select range:</label>
88+
<input id="sample-range" type="range" min="0" max="100">
89+
</div>
90+
91+
<div>
92+
<label for="sample-date">Pick a date:</label>
93+
<input id="sample-date" type="date">
94+
</div>
95+
96+
<div>
97+
<label for="sample-color">Pick a color:</label>
98+
<input id="sample-color" type="color">
99+
</div>
100+
101+
<div>
102+
<p>This is a sample paragraph with some interactive content.</p>
103+
</div>
104+
105+
<div>
106+
<ul>
107+
<li>Item 1</li>
108+
<li>Item 2</li>
109+
<li>Item 3</li>
110+
</ul>
111+
</div>
112+
113+
<div>
114+
<button onclick="alert('Button clicked!')">Click Me</button>
115+
</div>
116+
</div>
117+
</body>
118+
</html>

0 commit comments

Comments
 (0)