Skip to content

Commit 801d0bf

Browse files
sinarusinaru
committed
Add sandbox example for global hotkeys
1 parent c377e17 commit 801d0bf

File tree

1 file changed

+149
-0
lines changed

1 file changed

+149
-0
lines changed

‎sandbox/global-hotkeys.html.example‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
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
11+
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;">
12+
<p>Focus outside the player (e.g. click anywhere in the page) and press a hotkey (e.g. space bar).
13+
The player hotkey should trigger and perform the action.</p>
14+
<p>By setting <code>globalHotkeys: true</code> extends the normal hotkey behavior at the global level. Therefore
15+
<code>hotkeys: true</code> also need to be set.</p>
16+
<p>Note that if the focus is on an interactive element in the page, the global hotkey behavior would not trigger.</p>
17+
</div>
18+
19+
<div>
20+
<h2>Player with default hotkeys</h2>
21+
<video-js
22+
id="vid1"
23+
controls
24+
preload="auto"
25+
width="640"
26+
height="264"
27+
poster="https://vjs.zencdn.net/v/oceans.png">
28+
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
29+
<source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
30+
<source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
31+
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
32+
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a
33+
href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
34+
</video-js>
35+
36+
<h2>Player with 'x' button linked to play/pause</h2>
37+
<video-js
38+
id="vid2"
39+
controls
40+
preload="auto"
41+
width="640"
42+
height="264"
43+
poster="https://vjs.zencdn.net/v/oceans.png">
44+
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
45+
<source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
46+
<source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
47+
<track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
48+
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a
49+
href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
50+
</video-js>
51+
52+
<script>
53+
var player1 = videojs('vid1', {
54+
userActions: {
55+
globalHotkeys: true,
56+
hotkeys: true
57+
}
58+
});
59+
player1.log('window.player 1 created', player1);
60+
var player2 = videojs('vid2', {
61+
userActions: {
62+
globalHotkeys: true,
63+
hotkeys: function (event) {
64+
// `x` key = play/pause
65+
if (event.which === 88) {
66+
this.paused() ? this.play() : this.pause();
67+
}
68+
}
69+
}
70+
});
71+
player2.log('window.player 2 created', player2);
72+
</script>
73+
</div>
74+
75+
<div id="test-interactive-area" style="margin-top: 50px">
76+
<h2>Test Interactive Area</h2>
77+
78+
<div>
79+
<label for="sample-input">Sample Input:</label>
80+
<input id="sample-input" type="text" name="foo" value="bar">
81+
</div>
82+
83+
<div>
84+
<label for="sample-password">Password:</label>
85+
<input id="sample-password" type="password" name="password">
86+
</div>
87+
88+
<div>
89+
<label for="sample-checkbox">
90+
<input id="sample-checkbox" type="checkbox"> Check me
91+
</label>
92+
</div>
93+
94+
<div>
95+
<label for="sample-radio1">
96+
<input id="sample-radio1" type="radio" name="sample-radio" value="option1"> Option 1
97+
</label>
98+
<label for="sample-radio2">
99+
<input id="sample-radio2" type="radio" name="sample-radio" value="option2"> Option 2
100+
</label>
101+
</div>
102+
103+
<div>
104+
<label for="sample-select">Choose an option:</label>
105+
<select id="sample-select">
106+
<option value="1">Option 1</option>
107+
<option value="2">Option 2</option>
108+
<option value="3">Option 3</option>
109+
</select>
110+
</div>
111+
112+
<div>
113+
<label for="sample-textarea">Sample Textarea:</label>
114+
<textarea id="sample-textarea" rows="4" cols="50">This is a sample textarea with some test content.</textarea>
115+
</div>
116+
117+
<div>
118+
<label for="sample-range">Select range:</label>
119+
<input id="sample-range" type="range" min="0" max="100">
120+
</div>
121+
122+
<div>
123+
<label for="sample-date">Pick a date:</label>
124+
<input id="sample-date" type="date">
125+
</div>
126+
127+
<div>
128+
<label for="sample-color">Pick a color:</label>
129+
<input id="sample-color" type="color">
130+
</div>
131+
132+
<div>
133+
<p>This is a sample paragraph with some interactive content.</p>
134+
</div>
135+
136+
<div>
137+
<ul>
138+
<li>Item 1</li>
139+
<li>Item 2</li>
140+
<li>Item 3</li>
141+
</ul>
142+
</div>
143+
144+
<div>
145+
<button onclick="alert('Button clicked!')">Click Me</button>
146+
</div>
147+
</div>
148+
</body>
149+
</html>

0 commit comments

Comments
 (0)