myetv-player 1.0.0 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/codeql.yml +100 -0
- package/README.md +36 -58
- package/SECURITY.md +50 -0
- package/css/myetv-player.css +301 -218
- package/css/myetv-player.min.css +1 -1
- package/dist/myetv-player.js +1713 -1503
- package/dist/myetv-player.min.js +1670 -1471
- package/package.json +6 -1
- package/plugins/README.md +1016 -0
- package/plugins/cloudflare/README.md +1068 -0
- package/plugins/cloudflare/myetv-player-cloudflare-stream-plugin.js +556 -0
- package/plugins/facebook/README.md +1024 -0
- package/plugins/facebook/myetv-player-facebook-plugin.js +437 -0
- package/plugins/gamepad-remote-controller/README.md +816 -0
- package/plugins/gamepad-remote-controller/myetv-player-gamepad-remote-plugin.js +678 -0
- package/plugins/google-adsense-ads/README.md +1 -0
- package/plugins/google-adsense-ads/g-adsense-ads-plugin.js +158 -0
- package/plugins/google-ima-ads/README.md +1 -0
- package/plugins/google-ima-ads/g-ima-ads-plugin.js +355 -0
- package/plugins/twitch/README.md +1185 -0
- package/plugins/twitch/myetv-player-twitch-plugin.js +569 -0
- package/plugins/vast-vpaid-ads/README.md +1 -0
- package/plugins/vast-vpaid-ads/vast-vpaid-ads-plugin.js +346 -0
- package/plugins/vimeo/README.md +1416 -0
- package/plugins/vimeo/myetv-player-vimeo.js +640 -0
- package/plugins/youtube/README.md +851 -0
- package/plugins/youtube/myetv-player-youtube-plugin.js +1714 -210
- package/scss/README.md +160 -0
- package/scss/_menus.scss +840 -672
- package/scss/_responsive.scss +67 -105
- package/scss/_volume.scss +67 -105
- package/src/README.md +559 -0
- package/src/controls.js +16 -4
- package/src/core.js +1192 -1062
- package/src/i18n.js +27 -1
- package/src/quality.js +478 -436
- package/src/subtitles.js +2 -2
|
@@ -0,0 +1,816 @@
|
|
|
1
|
+
# MYETV Player - Gamepad Plugin
|
|
2
|
+
Add gamepad and controller support to MYETV Video Player. Perfect for Smart TVs, gaming consoles, TV remotes, and accessibility. Control video playback with Xbox, PlayStation, Nintendo controllers, or any gamepad!
|
|
3
|
+
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
## Table of Contents
|
|
7
|
+
|
|
8
|
+
- [Features](#features)
|
|
9
|
+
- [Installation](#installation)
|
|
10
|
+
- [Quick Start](#quick-start)
|
|
11
|
+
- [Configuration Options](#configuration-options)
|
|
12
|
+
- [Preset Mappings](#preset-mappings)
|
|
13
|
+
- [Custom Mapping](#custom-mapping)
|
|
14
|
+
- [API Methods](#api-methods)
|
|
15
|
+
- [Events](#events)
|
|
16
|
+
- [Controller Support](#controller-support)
|
|
17
|
+
- [Examples](#examples)
|
|
18
|
+
- [FAQ](#faq)
|
|
19
|
+
- [Troubleshooting](#troubleshooting)
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Features
|
|
24
|
+
|
|
25
|
+
- **Universal Gamepad Support**: Xbox, PlayStation, Nintendo, TV remotes, generic controllers
|
|
26
|
+
- **Perfect for Smart TVs**: 10-foot experience with TV remotes and gamepads
|
|
27
|
+
- **Auto-Detection**: Automatically detects controller type and applies preset
|
|
28
|
+
- **5 Built-in Presets**: Xbox, PlayStation, Nintendo, TV Remote, Generic
|
|
29
|
+
- **100% Customizable**: Create your own button mappings
|
|
30
|
+
- **Analog Stick Support**: Use analog sticks for seeking and volume control
|
|
31
|
+
- **Haptic Feedback**: Vibration support for supported controllers
|
|
32
|
+
- **Visual Feedback**: On-screen notifications for actions
|
|
33
|
+
- **Dead Zone Calibration**: Adjustable sensitivity for analog sticks
|
|
34
|
+
- **Accessibility**: Alternative input method for users with disabilities
|
|
35
|
+
- **Hot-Plug Support**: Connect/disconnect controllers anytime
|
|
36
|
+
- **Real-time Switching**: Change presets or mappings on the fly
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Installation
|
|
41
|
+
|
|
42
|
+
### Method 1: Direct Script Include
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<!-- Load MYETV Player Core -->
|
|
46
|
+
<script src="dist/myetv-player.js"></script>
|
|
47
|
+
|
|
48
|
+
<!-- Load Gamepad Plugin -->
|
|
49
|
+
<script src="plugins/myetv-player-gamepad-plugin.js"></script>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Method 2: Module Import
|
|
53
|
+
|
|
54
|
+
```javascript
|
|
55
|
+
import MYETVPlayer from './myetv-player.js';
|
|
56
|
+
import './plugins/myetv-player-gamepad-plugin.js';
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Quick Start
|
|
62
|
+
|
|
63
|
+
### Basic Example (Auto-detect)
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<!DOCTYPE html>
|
|
67
|
+
<html lang="en">
|
|
68
|
+
<head>
|
|
69
|
+
<meta charset="UTF-8">
|
|
70
|
+
<title>MYETV Player - Gamepad Control</title>
|
|
71
|
+
<link rel="stylesheet" href="dist/myetv-player.css">
|
|
72
|
+
</head>
|
|
73
|
+
<body>
|
|
74
|
+
<video id="myVideo" class="video-player" src="video.mp4"></video>
|
|
75
|
+
|
|
76
|
+
<script src="dist/myetv-player.js"></script>
|
|
77
|
+
<script src="plugins/myetv-player-gamepad-plugin.js"></script>
|
|
78
|
+
|
|
79
|
+
<script>
|
|
80
|
+
// Initialize with gamepad support (auto-detect enabled)
|
|
81
|
+
const player = new MYETVPlayer('myVideo', {
|
|
82
|
+
debug: true,
|
|
83
|
+
plugins: {
|
|
84
|
+
gamepad: {
|
|
85
|
+
enabled: true,
|
|
86
|
+
autoDetect: true // Auto-detect controller type
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
// That's it! Connect your controller and start playing!
|
|
92
|
+
</script>
|
|
93
|
+
</body>
|
|
94
|
+
</html>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## Configuration Options
|
|
100
|
+
|
|
101
|
+
```javascript
|
|
102
|
+
const player = new MYETVPlayer('myVideo', {
|
|
103
|
+
plugins: {
|
|
104
|
+
gamepad: {
|
|
105
|
+
// ========== Enable/Disable ==========
|
|
106
|
+
enabled: true, // Enable gamepad plugin
|
|
107
|
+
|
|
108
|
+
// ========== Preset Selection ==========
|
|
109
|
+
// Options: 'xbox', 'playstation', 'nintendo', 'tv-remote', 'generic'
|
|
110
|
+
preset: 'xbox',
|
|
111
|
+
|
|
112
|
+
// ========== Auto-Detection ==========
|
|
113
|
+
autoDetect: true, // Auto-detect controller type
|
|
114
|
+
|
|
115
|
+
// ========== Custom Mapping ==========
|
|
116
|
+
// Set custom button/axis mapping (overrides preset)
|
|
117
|
+
customMapping: null, // See Custom Mapping section
|
|
118
|
+
|
|
119
|
+
// ========== Analog Stick Settings ==========
|
|
120
|
+
deadZone: 0.2, // Ignore small movements (0-1)
|
|
121
|
+
seekSensitivity: 5, // Seconds to seek per input
|
|
122
|
+
volumeSensitivity: 0.05, // Volume change per input (0-1)
|
|
123
|
+
|
|
124
|
+
// ========== Polling ==========
|
|
125
|
+
pollingRate: 100, // Check controller state every X ms
|
|
126
|
+
|
|
127
|
+
// ========== Haptic Feedback ==========
|
|
128
|
+
enableVibration: true, // Enable controller vibration
|
|
129
|
+
vibrationIntensity: 0.5, // Vibration strength (0-1)
|
|
130
|
+
|
|
131
|
+
// ========== UI Feedback ==========
|
|
132
|
+
showFeedback: true, // Show on-screen action feedback
|
|
133
|
+
feedbackDuration: 1000, // Feedback display time (ms)
|
|
134
|
+
|
|
135
|
+
// ========== Debug ==========
|
|
136
|
+
debug: false // Enable debug logging
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
## Preset Mappings
|
|
145
|
+
|
|
146
|
+
The plugin includes 5 built-in presets optimized for different controllers:
|
|
147
|
+
|
|
148
|
+
### 1. Xbox Controller (Default)
|
|
149
|
+
|
|
150
|
+
```
|
|
151
|
+
A Button (0) → Play/Pause
|
|
152
|
+
B Button (1) → Stop
|
|
153
|
+
X Button (2) → Fullscreen
|
|
154
|
+
Y Button (3) → Mute
|
|
155
|
+
LB (4) → Seek Backward (-5s)
|
|
156
|
+
RB (5) → Seek Forward (+5s)
|
|
157
|
+
LT (6) → Volume Down
|
|
158
|
+
RT (7) → Volume Up
|
|
159
|
+
Back/Select (8) → Show Info
|
|
160
|
+
Start (9) → Settings
|
|
161
|
+
Left Stick X → Seek
|
|
162
|
+
Left Stick Y → Volume
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
### 2. PlayStation Controller
|
|
168
|
+
|
|
169
|
+
```
|
|
170
|
+
Cross (0) → Play/Pause
|
|
171
|
+
Circle (1) → Stop
|
|
172
|
+
Square (2) → Fullscreen
|
|
173
|
+
Triangle (3) → Mute
|
|
174
|
+
L1 (4) → Seek Backward
|
|
175
|
+
R1 (5) → Seek Forward
|
|
176
|
+
L2 (6) → Volume Down
|
|
177
|
+
R2 (7) → Volume Up
|
|
178
|
+
Share (8) → Show Info
|
|
179
|
+
Options (9) → Settings
|
|
180
|
+
Left Stick X/Y → Seek/Volume
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
---
|
|
184
|
+
|
|
185
|
+
### 3. Nintendo Switch Controller
|
|
186
|
+
|
|
187
|
+
```
|
|
188
|
+
A (Bottom) (1) → Play/Pause
|
|
189
|
+
B (Right) (0) → Stop
|
|
190
|
+
X (Top) (3) → Fullscreen
|
|
191
|
+
Y (Left) (2) → Mute
|
|
192
|
+
L (4) → Seek Backward
|
|
193
|
+
R (5) → Seek Forward
|
|
194
|
+
ZL (6) → Volume Down
|
|
195
|
+
ZR (7) → Volume Up
|
|
196
|
+
- (8) → Show Info
|
|
197
|
+
+ (9) → Settings
|
|
198
|
+
Left Stick X/Y → Seek/Volume
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
---
|
|
202
|
+
|
|
203
|
+
### 4. TV Remote
|
|
204
|
+
|
|
205
|
+
```
|
|
206
|
+
OK/Select (0) → Play/Pause
|
|
207
|
+
Back (1) → Stop
|
|
208
|
+
Info/Guide (2) → Fullscreen
|
|
209
|
+
Mute (3) → Mute
|
|
210
|
+
Left (4) → Seek Backward
|
|
211
|
+
Right (5) → Seek Forward
|
|
212
|
+
Volume Down (6) → Volume Down
|
|
213
|
+
Volume Up (7) → Volume Up
|
|
214
|
+
Menu (9) → Settings
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
---
|
|
218
|
+
|
|
219
|
+
### 5. Generic
|
|
220
|
+
|
|
221
|
+
```
|
|
222
|
+
Button 0 → Play/Pause
|
|
223
|
+
Button 1 → Stop
|
|
224
|
+
Button 2 → Fullscreen
|
|
225
|
+
Button 3 → Mute
|
|
226
|
+
Button 4 → Seek Backward
|
|
227
|
+
Button 5 → Seek Forward
|
|
228
|
+
Button 6 → Volume Down
|
|
229
|
+
Button 7 → Volume Up
|
|
230
|
+
Axis 0 → Seek
|
|
231
|
+
Axis 1 → Volume
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
---
|
|
235
|
+
|
|
236
|
+
## Custom Mapping
|
|
237
|
+
|
|
238
|
+
Create your own button mapping:
|
|
239
|
+
|
|
240
|
+
### Example: Custom Mapping
|
|
241
|
+
|
|
242
|
+
```javascript
|
|
243
|
+
const player = new MYETVPlayer('myVideo', {
|
|
244
|
+
plugins: {
|
|
245
|
+
gamepad: {
|
|
246
|
+
customMapping: {
|
|
247
|
+
// Button mappings
|
|
248
|
+
playPause: { button: 0 }, // Button 0 = Play/Pause
|
|
249
|
+
stop: { button: 1 }, // Button 1 = Stop
|
|
250
|
+
seekForward: { button: 5 }, // Button 5 = +5s
|
|
251
|
+
seekBackward: { button: 4 }, // Button 4 = -5s
|
|
252
|
+
volumeUp: { button: 7 }, // Button 7 = Vol+
|
|
253
|
+
volumeDown: { button: 6 }, // Button 6 = Vol-
|
|
254
|
+
mute: { button: 3 }, // Button 3 = Mute
|
|
255
|
+
fullscreen: { button: 2 }, // Button 2 = Fullscreen
|
|
256
|
+
showInfo: { button: 8 }, // Button 8 = Show info
|
|
257
|
+
settings: { button: 9 }, // Button 9 = Settings
|
|
258
|
+
|
|
259
|
+
// Analog stick mappings (optional)
|
|
260
|
+
seekAxis: { axis: 0 }, // Left stick X = Seek
|
|
261
|
+
volumeAxis: { axis: 1 } // Left stick Y = Volume
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
});
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
### Available Actions
|
|
269
|
+
|
|
270
|
+
You can map these actions to any button or axis:
|
|
271
|
+
|
|
272
|
+
- `playPause` - Toggle play/pause
|
|
273
|
+
- `stop` - Stop and reset to beginning
|
|
274
|
+
- `seekForward` - Skip forward (default: +5s)
|
|
275
|
+
- `seekBackward` - Skip backward (default: -5s)
|
|
276
|
+
- `volumeUp` - Increase volume
|
|
277
|
+
- `volumeDown` - Decrease volume
|
|
278
|
+
- `mute` - Toggle mute
|
|
279
|
+
- `fullscreen` - Toggle fullscreen
|
|
280
|
+
- `showInfo` - Display video info overlay
|
|
281
|
+
- `settings` - Trigger settings event
|
|
282
|
+
|
|
283
|
+
### Button/Axis Indices
|
|
284
|
+
|
|
285
|
+
Button and axis indices are standardized:
|
|
286
|
+
|
|
287
|
+
**Standard Gamepad Buttons:**
|
|
288
|
+
```
|
|
289
|
+
0 = A / Cross / Bottom button
|
|
290
|
+
1 = B / Circle / Right button
|
|
291
|
+
2 = X / Square / Left button
|
|
292
|
+
3 = Y / Triangle / Top button
|
|
293
|
+
4 = LB / L1 / L
|
|
294
|
+
5 = RB / R1 / R
|
|
295
|
+
6 = LT / L2 / ZL
|
|
296
|
+
7 = RT / R2 / ZR
|
|
297
|
+
8 = Back / Share / Select
|
|
298
|
+
9 = Start / Options / Menu
|
|
299
|
+
10 = Left stick press
|
|
300
|
+
11 = Right stick press
|
|
301
|
+
12 = D-pad Up
|
|
302
|
+
13 = D-pad Down
|
|
303
|
+
14 = D-pad Left
|
|
304
|
+
15 = D-pad Right
|
|
305
|
+
16 = Home / PS / Guide
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
**Standard Gamepad Axes:**
|
|
309
|
+
```
|
|
310
|
+
0 = Left stick X (-1 left, +1 right)
|
|
311
|
+
1 = Left stick Y (-1 up, +1 down)
|
|
312
|
+
2 = Right stick X
|
|
313
|
+
3 = Right stick Y
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
---
|
|
317
|
+
|
|
318
|
+
## API Methods
|
|
319
|
+
|
|
320
|
+
### Get Connected Gamepads
|
|
321
|
+
|
|
322
|
+
```javascript
|
|
323
|
+
const gamepads = player.getConnectedGamepads();
|
|
324
|
+
console.log('Connected:', gamepads.length);
|
|
325
|
+
|
|
326
|
+
gamepads.forEach(gamepad => {
|
|
327
|
+
console.log('ID:', gamepad.id);
|
|
328
|
+
console.log('Buttons:', gamepad.buttons.length);
|
|
329
|
+
console.log('Axes:', gamepad.axes.length);
|
|
330
|
+
});
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
---
|
|
334
|
+
|
|
335
|
+
### Change Preset
|
|
336
|
+
|
|
337
|
+
```javascript
|
|
338
|
+
// Switch to PlayStation preset
|
|
339
|
+
player.setGamepadPreset('playstation');
|
|
340
|
+
|
|
341
|
+
// Switch to TV remote preset
|
|
342
|
+
player.setGamepadPreset('tv-remote');
|
|
343
|
+
|
|
344
|
+
// Available presets:
|
|
345
|
+
// 'xbox', 'playstation', 'nintendo', 'tv-remote', 'generic'
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
---
|
|
349
|
+
|
|
350
|
+
### Set Custom Mapping
|
|
351
|
+
|
|
352
|
+
```javascript
|
|
353
|
+
const customMapping = {
|
|
354
|
+
playPause: { button: 0 },
|
|
355
|
+
seekForward: { button: 5 },
|
|
356
|
+
seekBackward: { button: 4 }
|
|
357
|
+
};
|
|
358
|
+
|
|
359
|
+
player.setGamepadMapping(customMapping);
|
|
360
|
+
```
|
|
361
|
+
|
|
362
|
+
---
|
|
363
|
+
|
|
364
|
+
### Get Current Mapping
|
|
365
|
+
|
|
366
|
+
```javascript
|
|
367
|
+
const currentMapping = player.getGamepadMapping();
|
|
368
|
+
console.log('Current mapping:', currentMapping);
|
|
369
|
+
```
|
|
370
|
+
|
|
371
|
+
---
|
|
372
|
+
|
|
373
|
+
## Events
|
|
374
|
+
|
|
375
|
+
### gamepad:connected
|
|
376
|
+
|
|
377
|
+
Fired when a controller connects.
|
|
378
|
+
|
|
379
|
+
```javascript
|
|
380
|
+
player.addEventListener('gamepad:connected', (data) => {
|
|
381
|
+
console.log('Controller connected:', data.id);
|
|
382
|
+
console.log('Index:', data.index);
|
|
383
|
+
console.log('Buttons:', data.buttons);
|
|
384
|
+
console.log('Axes:', data.axes);
|
|
385
|
+
});
|
|
386
|
+
```
|
|
387
|
+
|
|
388
|
+
---
|
|
389
|
+
|
|
390
|
+
### gamepad:disconnected
|
|
391
|
+
|
|
392
|
+
Fired when a controller disconnects.
|
|
393
|
+
|
|
394
|
+
```javascript
|
|
395
|
+
player.addEventListener('gamepad:disconnected', (data) => {
|
|
396
|
+
console.log('Controller disconnected:', data.id);
|
|
397
|
+
});
|
|
398
|
+
```
|
|
399
|
+
|
|
400
|
+
---
|
|
401
|
+
|
|
402
|
+
### gamepad:action
|
|
403
|
+
|
|
404
|
+
Fired when any gamepad action is executed.
|
|
405
|
+
|
|
406
|
+
```javascript
|
|
407
|
+
player.addEventListener('gamepad:action', (data) => {
|
|
408
|
+
console.log('Action:', data.action); // 'playPause', 'seekForward', etc.
|
|
409
|
+
console.log('Gamepad:', data.gamepadIndex);
|
|
410
|
+
});
|
|
411
|
+
```
|
|
412
|
+
|
|
413
|
+
---
|
|
414
|
+
|
|
415
|
+
### gamepad:settings
|
|
416
|
+
|
|
417
|
+
Fired when settings button is pressed.
|
|
418
|
+
|
|
419
|
+
```javascript
|
|
420
|
+
player.addEventListener('gamepad:settings', () => {
|
|
421
|
+
console.log('Settings button pressed');
|
|
422
|
+
// Show your settings menu
|
|
423
|
+
});
|
|
424
|
+
```
|
|
425
|
+
|
|
426
|
+
---
|
|
427
|
+
|
|
428
|
+
## Controller Support
|
|
429
|
+
|
|
430
|
+
### Fully Tested
|
|
431
|
+
|
|
432
|
+
- Xbox One Controller
|
|
433
|
+
- Xbox Series X|S Controller
|
|
434
|
+
- PlayStation 4 DualShock
|
|
435
|
+
- PlayStation 5 DualSense
|
|
436
|
+
- Nintendo Switch Pro Controller
|
|
437
|
+
- Nintendo Switch Joy-Cons
|
|
438
|
+
- Generic USB/Bluetooth gamepads
|
|
439
|
+
|
|
440
|
+
### TV Platforms
|
|
441
|
+
|
|
442
|
+
- Samsung Smart TV (Tizen)
|
|
443
|
+
- LG webOS TV
|
|
444
|
+
- Android TV
|
|
445
|
+
- Fire TV
|
|
446
|
+
- Apple TV (with Siri Remote)
|
|
447
|
+
|
|
448
|
+
### Browser Support
|
|
449
|
+
|
|
450
|
+
- Chrome 21+
|
|
451
|
+
- Edge 12+
|
|
452
|
+
- Firefox 29+
|
|
453
|
+
- Safari 10.1+
|
|
454
|
+
- Opera 15+
|
|
455
|
+
|
|
456
|
+
---
|
|
457
|
+
|
|
458
|
+
## Examples
|
|
459
|
+
|
|
460
|
+
### Example 1: Xbox Controller Setup
|
|
461
|
+
|
|
462
|
+
```html
|
|
463
|
+
<video id="myVideo" class="video-player" src="video.mp4"></video>
|
|
464
|
+
|
|
465
|
+
<script>
|
|
466
|
+
const player = new MYETVPlayer('myVideo', {
|
|
467
|
+
plugins: {
|
|
468
|
+
gamepad: {
|
|
469
|
+
preset: 'xbox',
|
|
470
|
+
autoDetect: true,
|
|
471
|
+
showFeedback: true,
|
|
472
|
+
enableVibration: true
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
});
|
|
476
|
+
|
|
477
|
+
// Notify when controller connects
|
|
478
|
+
player.addEventListener('gamepad:connected', (data) => {
|
|
479
|
+
alert('Controller connected! Ready to play.');
|
|
480
|
+
});
|
|
481
|
+
</script>
|
|
482
|
+
```
|
|
483
|
+
|
|
484
|
+
---
|
|
485
|
+
|
|
486
|
+
### Example 2: TV Remote for Smart TV
|
|
487
|
+
|
|
488
|
+
```html
|
|
489
|
+
<video id="myVideo" class="video-player" src="video.mp4"></video>
|
|
490
|
+
|
|
491
|
+
<script>
|
|
492
|
+
const player = new MYETVPlayer('myVideo', {
|
|
493
|
+
plugins: {
|
|
494
|
+
gamepad: {
|
|
495
|
+
preset: 'tv-remote',
|
|
496
|
+
showFeedback: true,
|
|
497
|
+
seekSensitivity: 10, // Skip 10 seconds
|
|
498
|
+
volumeSensitivity: 0.1 // 10% volume change
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
});
|
|
502
|
+
</script>
|
|
503
|
+
```
|
|
504
|
+
|
|
505
|
+
---
|
|
506
|
+
|
|
507
|
+
### Example 3: Custom Mapping for Arcade Cabinet
|
|
508
|
+
|
|
509
|
+
```html
|
|
510
|
+
<video id="myVideo" class="video-player" src="video.mp4"></video>
|
|
511
|
+
|
|
512
|
+
<script>
|
|
513
|
+
const player = new MYETVPlayer('myVideo', {
|
|
514
|
+
plugins: {
|
|
515
|
+
gamepad: {
|
|
516
|
+
customMapping: {
|
|
517
|
+
playPause: { button: 0 }, // Player 1 Button 1
|
|
518
|
+
stop: { button: 1 }, // Player 1 Button 2
|
|
519
|
+
fullscreen: { button: 2 }, // Player 1 Button 3
|
|
520
|
+
mute: { button: 3 } // Player 1 Button 4
|
|
521
|
+
},
|
|
522
|
+
showFeedback: true,
|
|
523
|
+
enableVibration: false // No vibration in arcade
|
|
524
|
+
}
|
|
525
|
+
}
|
|
526
|
+
});
|
|
527
|
+
</script>
|
|
528
|
+
```
|
|
529
|
+
|
|
530
|
+
---
|
|
531
|
+
|
|
532
|
+
### Example 4: Multi-Controller Support
|
|
533
|
+
|
|
534
|
+
```html
|
|
535
|
+
<video id="myVideo" class="video-player" src="video.mp4"></video>
|
|
536
|
+
|
|
537
|
+
<div id="controller-list"></div>
|
|
538
|
+
|
|
539
|
+
<script>
|
|
540
|
+
const player = new MYETVPlayer('myVideo', {
|
|
541
|
+
plugins: {
|
|
542
|
+
gamepad: {
|
|
543
|
+
autoDetect: true,
|
|
544
|
+
showFeedback: true
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
});
|
|
548
|
+
|
|
549
|
+
// Show connected controllers
|
|
550
|
+
function updateControllerList() {
|
|
551
|
+
const gamepads = player.getConnectedGamepads();
|
|
552
|
+
const list = document.getElementById('controller-list');
|
|
553
|
+
|
|
554
|
+
list.innerHTML = '<h3>Connected Controllers:</h3>';
|
|
555
|
+
gamepads.forEach((gamepad, index) => {
|
|
556
|
+
list.innerHTML += `<p>${index + 1}. ${gamepad.id}</p>`;
|
|
557
|
+
});
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
player.addEventListener('gamepad:connected', updateControllerList);
|
|
561
|
+
player.addEventListener('gamepad:disconnected', updateControllerList);
|
|
562
|
+
</script>
|
|
563
|
+
```
|
|
564
|
+
|
|
565
|
+
---
|
|
566
|
+
|
|
567
|
+
### Example 5: Change Preset On-the-Fly
|
|
568
|
+
|
|
569
|
+
```html
|
|
570
|
+
<video id="myVideo" class="video-player" src="video.mp4"></video>
|
|
571
|
+
|
|
572
|
+
<div>
|
|
573
|
+
<button onclick="setPreset('xbox')">Xbox</button>
|
|
574
|
+
<button onclick="setPreset('playstation')">PlayStation</button>
|
|
575
|
+
<button onclick="setPreset('nintendo')">Nintendo</button>
|
|
576
|
+
<button onclick="setPreset('tv-remote')">TV Remote</button>
|
|
577
|
+
</div>
|
|
578
|
+
|
|
579
|
+
<script>
|
|
580
|
+
const player = new MYETVPlayer('myVideo', {
|
|
581
|
+
plugins: {
|
|
582
|
+
gamepad: {
|
|
583
|
+
autoDetect: false, // Manual preset selection
|
|
584
|
+
showFeedback: true
|
|
585
|
+
}
|
|
586
|
+
}
|
|
587
|
+
});
|
|
588
|
+
|
|
589
|
+
function setPreset(preset) {
|
|
590
|
+
player.setGamepadPreset(preset);
|
|
591
|
+
console.log('Preset changed to:', preset);
|
|
592
|
+
}
|
|
593
|
+
</script>
|
|
594
|
+
```
|
|
595
|
+
|
|
596
|
+
---
|
|
597
|
+
|
|
598
|
+
### Example 6: Sensitivity Adjustment
|
|
599
|
+
|
|
600
|
+
```html
|
|
601
|
+
<video id="myVideo" class="video-player" src="video.mp4"></video>
|
|
602
|
+
|
|
603
|
+
<div>
|
|
604
|
+
<label>Seek Sensitivity: <input type="range" id="seekSens" min="1" max="30" value="5"></label>
|
|
605
|
+
<label>Volume Sensitivity: <input type="range" id="volSens" min="1" max="20" value="5"></label>
|
|
606
|
+
</div>
|
|
607
|
+
|
|
608
|
+
<script>
|
|
609
|
+
const player = new MYETVPlayer('myVideo', {
|
|
610
|
+
plugins: {
|
|
611
|
+
gamepad: {
|
|
612
|
+
preset: 'xbox',
|
|
613
|
+
seekSensitivity: 5,
|
|
614
|
+
volumeSensitivity: 0.05
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
});
|
|
618
|
+
|
|
619
|
+
const gamepadPlugin = player.getPlugin('gamepad');
|
|
620
|
+
|
|
621
|
+
// Update seek sensitivity
|
|
622
|
+
document.getElementById('seekSens').oninput = (e) => {
|
|
623
|
+
gamepadPlugin.options.seekSensitivity = parseInt(e.target.value);
|
|
624
|
+
};
|
|
625
|
+
|
|
626
|
+
// Update volume sensitivity
|
|
627
|
+
document.getElementById('volSens').oninput = (e) => {
|
|
628
|
+
gamepadPlugin.options.volumeSensitivity = parseInt(e.target.value) / 100;
|
|
629
|
+
};
|
|
630
|
+
</script>
|
|
631
|
+
```
|
|
632
|
+
|
|
633
|
+
---
|
|
634
|
+
|
|
635
|
+
## FAQ
|
|
636
|
+
|
|
637
|
+
### Q: Which controllers are supported?
|
|
638
|
+
|
|
639
|
+
**A:** Any controller that works with the Gamepad API! This includes:
|
|
640
|
+
- Xbox controllers (wired and wireless)
|
|
641
|
+
- PlayStation controllers (DualShock 4, DualSense)
|
|
642
|
+
- Nintendo controllers (Pro, Joy-Cons)
|
|
643
|
+
- Generic USB/Bluetooth gamepads
|
|
644
|
+
- TV remotes on Smart TVs
|
|
645
|
+
|
|
646
|
+
---
|
|
647
|
+
|
|
648
|
+
### Q: Do I need drivers or software?
|
|
649
|
+
|
|
650
|
+
**A:** No! The Gamepad API is built into modern browsers. Just connect your controller and it should work immediately.
|
|
651
|
+
|
|
652
|
+
---
|
|
653
|
+
|
|
654
|
+
### Q: Can I use multiple controllers?
|
|
655
|
+
|
|
656
|
+
**A:** Yes! The plugin supports multiple controllers simultaneously. Any controller can control the player.
|
|
657
|
+
|
|
658
|
+
---
|
|
659
|
+
|
|
660
|
+
### Q: How do I know which button is which?
|
|
661
|
+
|
|
662
|
+
**A:** Enable debug mode to see button/axis indices:
|
|
663
|
+
```javascript
|
|
664
|
+
plugins: {
|
|
665
|
+
gamepad: {
|
|
666
|
+
debug: true // Shows button presses in console
|
|
667
|
+
}
|
|
668
|
+
}
|
|
669
|
+
```
|
|
670
|
+
|
|
671
|
+
---
|
|
672
|
+
|
|
673
|
+
### Q: Does vibration work on all controllers?
|
|
674
|
+
|
|
675
|
+
**A:** Vibration works on controllers with vibration actuators (Xbox, PlayStation). Not all browsers support vibration yet.
|
|
676
|
+
|
|
677
|
+
---
|
|
678
|
+
|
|
679
|
+
### Q: Can I disable the on-screen feedback?
|
|
680
|
+
|
|
681
|
+
**A:** Yes:
|
|
682
|
+
```javascript
|
|
683
|
+
plugins: {
|
|
684
|
+
gamepad: {
|
|
685
|
+
showFeedback: false
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
```
|
|
689
|
+
|
|
690
|
+
---
|
|
691
|
+
|
|
692
|
+
### Q: How do I map D-pad buttons?
|
|
693
|
+
|
|
694
|
+
**A:** D-pad buttons are indices 12-15:
|
|
695
|
+
```javascript
|
|
696
|
+
customMapping: {
|
|
697
|
+
seekForward: { button: 15 }, // D-pad Right
|
|
698
|
+
seekBackward: { button: 14 } // D-pad Left
|
|
699
|
+
}
|
|
700
|
+
```
|
|
701
|
+
|
|
702
|
+
---
|
|
703
|
+
|
|
704
|
+
### Q: Can I use this for accessibility?
|
|
705
|
+
|
|
706
|
+
**A:** Absolutely! Gamepads are a great accessibility tool for users who can't use keyboard/mouse.
|
|
707
|
+
|
|
708
|
+
---
|
|
709
|
+
|
|
710
|
+
## Troubleshooting
|
|
711
|
+
|
|
712
|
+
### Issue: Controller not detected
|
|
713
|
+
|
|
714
|
+
**Solution:**
|
|
715
|
+
1. Check if controller is connected properly
|
|
716
|
+
2. Enable debug mode: `debug: true`
|
|
717
|
+
3. Press any button to "wake up" the controller
|
|
718
|
+
4. Check browser console for Gamepad API support
|
|
719
|
+
5. Try in a different browser
|
|
720
|
+
|
|
721
|
+
---
|
|
722
|
+
|
|
723
|
+
### Issue: Wrong buttons mapped
|
|
724
|
+
|
|
725
|
+
**Solution:**
|
|
726
|
+
1. Different controllers have different layouts
|
|
727
|
+
2. Enable debug mode to see button indices
|
|
728
|
+
3. Use auto-detect or choose correct preset
|
|
729
|
+
4. Or create custom mapping with correct indices
|
|
730
|
+
|
|
731
|
+
---
|
|
732
|
+
|
|
733
|
+
### Issue: Analog sticks too sensitive/not responsive
|
|
734
|
+
|
|
735
|
+
**Solution:**
|
|
736
|
+
Adjust dead zone:
|
|
737
|
+
```javascript
|
|
738
|
+
plugins: {
|
|
739
|
+
gamepad: {
|
|
740
|
+
deadZone: 0.3 // Increase for less sensitivity (0-1)
|
|
741
|
+
}
|
|
742
|
+
}
|
|
743
|
+
```
|
|
744
|
+
|
|
745
|
+
---
|
|
746
|
+
|
|
747
|
+
### Issue: Actions triggering too fast
|
|
748
|
+
|
|
749
|
+
**Solution:**
|
|
750
|
+
Increase polling rate (check less frequently):
|
|
751
|
+
```javascript
|
|
752
|
+
plugins: {
|
|
753
|
+
gamepad: {
|
|
754
|
+
pollingRate: 200 // Check every 200ms instead of 100ms
|
|
755
|
+
}
|
|
756
|
+
}
|
|
757
|
+
```
|
|
758
|
+
|
|
759
|
+
---
|
|
760
|
+
|
|
761
|
+
### Issue: Vibration not working
|
|
762
|
+
|
|
763
|
+
**Solution:**
|
|
764
|
+
- Not all browsers support vibration
|
|
765
|
+
- Check if controller has vibration motors
|
|
766
|
+
- Try Chrome or Edge (best support)
|
|
767
|
+
|
|
768
|
+
---
|
|
769
|
+
|
|
770
|
+
### Debug Mode
|
|
771
|
+
|
|
772
|
+
Enable comprehensive debugging:
|
|
773
|
+
|
|
774
|
+
```javascript
|
|
775
|
+
const player = new MYETVPlayer('myVideo', {
|
|
776
|
+
debug: true,
|
|
777
|
+
plugins: {
|
|
778
|
+
gamepad: {
|
|
779
|
+
debug: true,
|
|
780
|
+
showFeedback: true
|
|
781
|
+
}
|
|
782
|
+
}
|
|
783
|
+
});
|
|
784
|
+
```
|
|
785
|
+
|
|
786
|
+
This will log:
|
|
787
|
+
- Controller connections/disconnections
|
|
788
|
+
- Button presses with indices
|
|
789
|
+
- Axis movements
|
|
790
|
+
- Action executions
|
|
791
|
+
|
|
792
|
+
---
|
|
793
|
+
|
|
794
|
+
## Resources
|
|
795
|
+
|
|
796
|
+
- **MYETV Player**: [https://www.myetv.tv](https://www.myetv.tv)
|
|
797
|
+
- **Gamepad API MDN**: [https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API)
|
|
798
|
+
- **Gamepad Tester**: [https://gamepad-tester.com](https://gamepad-tester.com) (test your controller)
|
|
799
|
+
- **GitHub**: [MYETV Video Player Open Source](https://github.com/OskarCosimo/myetv-video-player-opensource)
|
|
800
|
+
- **Author**: [https://oskarcosimo.com](https://oskarcosimo.com)
|
|
801
|
+
|
|
802
|
+
---
|
|
803
|
+
|
|
804
|
+
## License
|
|
805
|
+
|
|
806
|
+
MIT License - See main project for details.
|
|
807
|
+
|
|
808
|
+
---
|
|
809
|
+
|
|
810
|
+
## Contributing
|
|
811
|
+
|
|
812
|
+
Contributions are welcome! Please submit pull requests or open issues on GitHub.
|
|
813
|
+
|
|
814
|
+
---
|
|
815
|
+
|
|
816
|
+
**Game on!**
|