0
# Tech System
1

2
The Tech system in Video.js provides an abstraction layer for different media playback technologies (HTML5, Flash, etc.), allowing for consistent player behavior across different playback engines and enabling custom tech implementations.
3

4
## Capabilities
5

6
### Tech Registration
7

8
Register custom playback technologies for use in Video.js players.
9

10
```javascript { .api }
11
/**
12
 * Register a playback technology
13
 * @param name - Tech name (used in techOrder option)
14
 * @param tech - Tech class extending Tech base class
15
 */
16
videojs.registerTech(name: string, tech: typeof Tech): void;
17

18
/**
19
 * Get registered tech class by name
20
 * @param name - Tech name
21
 * @returns Tech class or undefined
22
 */
23
videojs.getTech(name: string): typeof Tech | undefined;
24
```
25

26
**Usage Examples:**
27

28
```javascript
29
// Register custom tech
30
class CustomTech extends videojs.getTech('Tech') {
31
  static isSupported() {
32
    return true; // Check if this tech is supported
33
  }
34
  
35
  constructor(options, ready) {
36
    super(options, ready);
37
    this.setupCustomPlayback();
38
  }
39
  
40
  setupCustomPlayback() {
41
    // Initialize custom playback engine
42
  }
43
}
44

45
// Register the tech
46
videojs.registerTech('CustomTech', CustomTech);
47

48
// Use in player options
49
const player = videojs('my-video', {
50
  techOrder: ['CustomTech', 'Html5']
51
});
52
```
53

54
### Base Tech Class
55

56
Core functionality that all tech implementations must provide.
57

58
```javascript { .api }
59
/**
60
 * Base Tech class for media playback technologies
61
 */
62
class Tech {
63
  /**
64
   * Create tech instance
65
   * @param options - Tech options
66
   * @param ready - Ready callback
67
   */
68
  constructor(options?: TechOptions, ready?: () => void);
69
  
70
  /**
71
   * Check if this tech is supported in current environment
72
   * @returns True if supported
73
   */
74
  static isSupported(): boolean;
75
  
76
  /**
77
   * Check if tech can play given source
78
   * @param source - Media source to check
79
   * @returns Support level ('probably', 'maybe', or '')
80
   */
81
  static canPlaySource(source: Source): string;
82
  
83
  /**
84
   * Check if tech can play given type
85
   * @param type - MIME type to check
86
   * @returns Support level ('probably', 'maybe', or '')
87
   */
88
  static canPlayType(type: string): string;
89
  
90
  /**
91
   * Get tech features
92
   * @returns Object describing tech capabilities
93
   */
94
  static getFeatures(): TechFeatures;
95
}
96
```
97

98
### Playback Control Interface
99

100
Standard playback methods that all techs must implement.
101

102
```javascript { .api }
103
/**
104
 * Start media playback
105
 * @returns Promise that resolves when playback starts
106
 */
107
play(): Promise<void>;
108

109
/**
110
 * Pause media playback
111
 */
112
pause(): void;
113

114
/**
115
 * Check if media is paused
116
 * @returns True if paused
117
 */
118
paused(): boolean;
119

120
/**
121
 * Get current playback time
122
 * @returns Current time in seconds
123
 */
124
currentTime(): number;
125

126
/**
127
 * Set current playback time
128
 * @param seconds - Time to seek to
129
 */
130
setCurrentTime(seconds: number): void;
131

132
/**
133
 * Get media duration
134
 * @returns Duration in seconds
135
 */
136
duration(): number;
137

138
/**
139
 * Get buffered time ranges
140
 * @returns TimeRanges object
141
 */
142
buffered(): TimeRanges;
143

144
/**
145
 * Get volume level
146
 * @returns Volume (0.0 to 1.0)
147
 */
148
volume(): number;
149

150
/**
151
 * Set volume level
152
 * @param level - Volume (0.0 to 1.0)
153
 */
154
setVolume(level: number): void;
155

156
/**
157
 * Check if muted
158
 * @returns True if muted
159
 */
160
muted(): boolean;
161

162
/**
163
 * Set muted state
164
 * @param muted - True to mute
165
 */
166
setMuted(muted: boolean): void;
167

168
/**
169
 * Get playback rate
170
 * @returns Current playback rate
171
 */
172
playbackRate(): number;
173

174
/**
175
 * Set playback rate
176
 * @param rate - Playback rate (1.0 = normal)
177
 */
178
setPlaybackRate(rate: number): void;
179
```
180

181
### Source Management
182

183
Methods for loading and managing media sources.
184

185
```javascript { .api }
186
/**
187
 * Set media source
188
 * @param source - Source object or URL
189
 */
190
setSrc(source: Source | string): void;
191

192
/**
193
 * Get current source
194
 * @returns Current source object
195
 */
196
src(): Source;
197

198
/**
199
 * Get current source URL
200
 * @returns Current source URL
201
 */
202
currentSrc(): string;
203

204
/**
205
 * Load media source
206
 */
207
load(): void;
208

209
/**
210
 * Reset tech to initial state
211
 */
212
reset(): void;
213
```
214

215
### Dimensions and Display
216

217
Control video dimensions and display properties.
218

219
```javascript { .api }
220
/**
221
 * Get video width
222
 * @returns Width in pixels
223
 */
224
videoWidth(): number;
225

226
/**
227
 * Get video height
228
 * @returns Height in pixels
229
 */
230
videoHeight(): number;
231

232
/**
233
 * Set poster image
234
 * @param src - Poster image URL
235
 */
236
setPoster(src: string): void;
237
```
238

239
### HTML5 Tech
240

241
The default HTML5 tech implementation with extensive browser support.
242

243
```javascript { .api }
244
/**
245
 * HTML5 tech using native video/audio elements
246
 */
247
class Html5 extends Tech {
248
  /**
249
   * HTML5 tech options
250
   */
251
  static readonly Options: Html5Options;
252
  
253
  /**
254
   * Supported events
255
   */
256
  static readonly Events: string[];
257
  
258
  /**
259
   * Check HTML5 video support
260
   * @returns True if HTML5 video is supported
261
   */
262
  static isSupported(): boolean;
263
  
264
  /**
265
   * Get native video element
266
   * @returns HTML video element
267
   */
268
  el(): HTMLVideoElement;
269
}
270
```
271

272
**Usage Examples:**
273

274
```javascript
275
// HTML5 tech options
276
const player = videojs('my-video', {
277
  html5: {
278
    preloadTextTracks: false,
279
    nativeAudioTracks: false,
280
    nativeVideoTracks: false,
281
    nativeTextTracks: false
282
  }
283
});
284

285
// Access HTML5 tech directly
286
const html5Tech = player.tech({ IWillNotUseThisInPlugins: true });
287
const videoElement = html5Tech.el();
288
```
289

290
### Middleware System
291

292
Intercept and modify tech operations using middleware.
293

294
```javascript { .api }
295
/**
296
 * Register middleware for tech operations
297
 * @param type - Middleware type or tech name
298
 * @param middleware - Middleware function or object
299
 */
300
videojs.use(type: string, middleware: MiddlewareFunction | MiddlewareObject): void;
301

302
/**
303
 * Middleware terminator object
304
 */
305
videojs.middleware.TERMINATOR: object;
306
```
307

308
**Usage Examples:**
309

310
```javascript
311
// Source middleware - modify sources before loading
312
videojs.use('*', (player) => {
313
  return {
314
    setSource(srcObj, next) {
315
      // Modify source before setting
316
      if (srcObj.src.includes('example.com')) {
317
        srcObj.src = srcObj.src.replace('http://', 'https://');
318
      }
319
      next(null, srcObj);
320
    }
321
  };
322
});
323

324
// Play middleware - intercept play calls
325
videojs.use('Html5', (player) => {
326
  return {
327
    callPlay() {
328
      console.log('Play intercepted');
329
      // Return terminator to prevent default play
330
      return videojs.middleware.TERMINATOR;
331
    }
332
  };
333
});
334
```
335

336
### Custom Tech Implementation
337

338
Example of implementing a custom tech for specialized playback needs.
339

340
**Usage Examples:**
341

342
```javascript
343
// Custom streaming tech
344
class StreamingTech extends videojs.getTech('Tech') {
345
  constructor(options, ready) {
346
    super(options, ready);
347
    this.player_ = options.player;
348
    this.streamingEngine = null;
349
    this.setupStreaming();
350
  }
351
  
352
  static isSupported() {
353
    return window.StreamingEngine && window.StreamingEngine.isSupported();
354
  }
355
  
356
  static canPlaySource(source) {
357
    return source.type === 'application/x-custom-stream' ? 'probably' : '';
358
  }
359
  
360
  setupStreaming() {
361
    this.streamingEngine = new window.StreamingEngine();
362
    this.streamingEngine.on('loaded', () => {
363
      this.trigger('loadedmetadata');
364
      this.trigger('canplay');
365
    });
366
  }
367
  
368
  play() {
369
    return this.streamingEngine.play();
370
  }
371
  
372
  pause() {
373
    this.streamingEngine.pause();
374
  }
375
  
376
  paused() {
377
    return this.streamingEngine.isPaused();
378
  }
379
  
380
  setSrc(source) {
381
    this.streamingEngine.load(source.src);
382
  }
383
  
384
  dispose() {
385
    if (this.streamingEngine) {
386
      this.streamingEngine.dispose();
387
    }
388
    super.dispose();
389
  }
390
}
391

392
// Register custom tech
393
videojs.registerTech('StreamingTech', StreamingTech);
394
```
395

396
### Tech Features
397

398
Tech capabilities that can be queried by the player.
399

400
```javascript { .api }
401
/**
402
 * Tech feature flags
403
 */
404
interface TechFeatures {
405
  // Volume control support
406
  volumeControl: boolean;
407
  
408
  // Fullscreen support  
409
  fullscreenResize: boolean;
410
  
411
  // Progress events support
412
  progressEvents: boolean;
413
  
414
  // Time update events support
415
  timeupdateEvents: boolean;
416
  
417
  // Playback rate support
418
  playbackRates: boolean;
419
  
420
  // Audio track support
421
  audioTracks: boolean;
422
  
423
  // Video track support  
424
  videoTracks: boolean;
425
  
426
  // Text track support
427
  textTracks: boolean;
428
  
429
  // Native text track support
430
  nativeTextTracks: boolean;
431
  
432
  // Source handler support
433
  sourceHandler: boolean;
434
}
435
```
436

437
## Types
438

439
```javascript { .api }
440
interface TechOptions {
441
  player?: Player;
442
  source?: Source;
443
  [key: string]: any;
444
}
445

446
interface Html5Options {
447
  preloadTextTracks?: boolean;
448
  nativeAudioTracks?: boolean;
449
  nativeVideoTracks?: boolean;
450
  nativeTextTracks?: boolean;
451
  [key: string]: any;
452
}
453

454
interface Source {
455
  src: string;
456
  type: string;
457
  [key: string]: any;
458
}
459

460
interface MiddlewareObject {
461
  callPlay?(): any;
462
  callPause?(): any;
463
  setSource?(src: Source, next: (error?: any, src?: Source) => void): void;
464
  setTech?(tech: Tech, next: (error?: any, tech?: Tech) => void): void;
465
  play?(cancelled: boolean, value: any): any;
466
  pause?(cancelled: boolean, value: any): any;
467
}
468

469
type MiddlewareFunction = (player: Player) => MiddlewareObject;
470

471
interface Tech {
472
  // Core playback
473
  play(): Promise<void>;
474
  pause(): void;
475
  paused(): boolean;
476
  
477
  // Time and seeking
478
  currentTime(): number;
479
  setCurrentTime(seconds: number): void;
480
  duration(): number;
481
  buffered(): TimeRanges;
482
  
483
  // Audio
484
  volume(): number;
485
  setVolume(level: number): void;
486
  muted(): boolean;
487
  setMuted(muted: boolean): void;
488
  
489
  // Sources
490
  setSrc(source: Source | string): void;
491
  src(): Source;
492
  load(): void;
493
  
494
  // Dimensions
495
  videoWidth(): number;
496
  videoHeight(): number;
497
  
498
  // Lifecycle
499
  dispose(): void;
500
}
501
```