]>
Commit | Line | Data |
---|---|---|
83fcadac C |
1 | // Thanks https://github.com/streamroot/videojs-hlsjs-plugin |
2 | // We duplicated this plugin to choose the hls.js version we want, because streamroot only provide a bundled file | |
3 | ||
4 | import * as Hlsjs from 'hls.js' | |
5 | import videojs, { VideoJsPlayer } from 'video.js' | |
6 | import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, VideoJSTechHLS } from '../peertube-videojs-typings' | |
7 | ||
8 | type ErrorCounts = { | |
9 | [ type: string ]: number | |
10 | } | |
11 | ||
12 | type Metadata = { | |
13 | levels: Hlsjs.Level[] | |
14 | } | |
15 | ||
16 | const registerSourceHandler = function (vjs: typeof videojs) { | |
17 | if (!Hlsjs.isSupported()) { | |
18 | console.warn('Hls.js is not supported in this browser!') | |
19 | return | |
20 | } | |
21 | ||
22 | const html5 = vjs.getTech('Html5') | |
23 | ||
24 | if (!html5) { | |
25 | console.error('Not supported version if video.js') | |
26 | return | |
27 | } | |
28 | ||
29 | // FIXME: typings | |
30 | (html5 as any).registerSourceHandler({ | |
31 | canHandleSource: function (source: videojs.Tech.SourceObject) { | |
32 | const hlsTypeRE = /^application\/x-mpegURL|application\/vnd\.apple\.mpegurl$/i | |
33 | const hlsExtRE = /\.m3u8/i | |
34 | ||
35 | if (hlsTypeRE.test(source.type)) return 'probably' | |
36 | if (hlsExtRE.test(source.src)) return 'maybe' | |
37 | ||
38 | return '' | |
39 | }, | |
40 | ||
41 | handleSource: function (source: videojs.Tech.SourceObject, tech: VideoJSTechHLS) { | |
42 | if (tech.hlsProvider) { | |
43 | tech.hlsProvider.dispose() | |
44 | } | |
45 | ||
46 | tech.hlsProvider = new Html5Hlsjs(vjs, source, tech) | |
47 | ||
48 | return tech.hlsProvider | |
49 | } | |
50 | }, 0); | |
51 | ||
52 | // FIXME: typings | |
53 | (vjs as any).Html5Hlsjs = Html5Hlsjs | |
54 | } | |
55 | ||
56 | function hlsjsConfigHandler (this: VideoJsPlayer, options: HlsjsConfigHandlerOptions) { | |
57 | const player = this | |
58 | ||
59 | if (!options) return | |
60 | ||
61 | if (!player.srOptions_) { | |
62 | player.srOptions_ = {} | |
63 | } | |
64 | ||
65 | if (!player.srOptions_.hlsjsConfig) { | |
66 | player.srOptions_.hlsjsConfig = options.hlsjsConfig | |
67 | } | |
68 | ||
69 | if (!player.srOptions_.captionConfig) { | |
70 | player.srOptions_.captionConfig = options.captionConfig | |
71 | } | |
72 | ||
73 | if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) { | |
74 | player.srOptions_.levelLabelHandler = options.levelLabelHandler | |
75 | } | |
76 | } | |
77 | ||
78 | const registerConfigPlugin = function (vjs: typeof videojs) { | |
79 | // Used in Brightcove since we don't pass options directly there | |
80 | const registerVjsPlugin = vjs.registerPlugin || vjs.plugin | |
81 | registerVjsPlugin('hlsjs', hlsjsConfigHandler) | |
82 | } | |
83 | ||
84 | class Html5Hlsjs { | |
85 | private static readonly hooks: { [id: string]: Function[] } = {} | |
86 | ||
87 | private readonly videoElement: HTMLVideoElement | |
88 | private readonly errorCounts: ErrorCounts = {} | |
89 | private readonly player: VideoJsPlayer | |
90 | private readonly tech: videojs.Tech | |
91 | private readonly source: videojs.Tech.SourceObject | |
92 | private readonly vjs: typeof videojs | |
93 | ||
94 | private hls: Hlsjs & { manualLevel?: number } // FIXME: typings | |
95 | private hlsjsConfig: Partial<Hlsjs.Config & { cueHandler: any }> = null | |
96 | ||
97 | private _duration: number = null | |
98 | private metadata: Metadata = null | |
99 | private isLive: boolean = null | |
100 | private dvrDuration: number = null | |
101 | private edgeMargin: number = null | |
102 | ||
103 | private handlers: { [ id in 'play' | 'addtrack' | 'playing' | 'textTracksChange' | 'audioTracksChange' ]: EventListener } = { | |
104 | play: null, | |
105 | addtrack: null, | |
106 | playing: null, | |
107 | textTracksChange: null, | |
108 | audioTracksChange: null | |
109 | } | |
110 | ||
111 | private uiTextTrackHandled = false | |
112 | ||
113 | constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) { | |
114 | this.vjs = vjs | |
115 | this.source = source | |
116 | ||
117 | this.tech = tech; | |
118 | (this.tech as any).name_ = 'Hlsjs' | |
119 | ||
120 | this.videoElement = tech.el() as HTMLVideoElement | |
121 | this.player = vjs((tech.options_ as any).playerId) | |
122 | ||
123 | this.videoElement.addEventListener('error', event => { | |
124 | let errorTxt: string | |
125 | const mediaError = (event.currentTarget as HTMLVideoElement).error | |
126 | ||
127 | switch (mediaError.code) { | |
128 | case mediaError.MEDIA_ERR_ABORTED: | |
129 | errorTxt = 'You aborted the video playback' | |
130 | break | |
131 | case mediaError.MEDIA_ERR_DECODE: | |
132 | errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support' | |
133 | this._handleMediaError(mediaError) | |
134 | break | |
135 | case mediaError.MEDIA_ERR_NETWORK: | |
136 | errorTxt = 'A network error caused the video download to fail part-way' | |
137 | break | |
138 | case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED: | |
139 | errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported' | |
140 | break | |
141 | ||
142 | default: | |
143 | errorTxt = mediaError.message | |
144 | } | |
145 | ||
146 | console.error('MEDIA_ERROR: ', errorTxt) | |
147 | }) | |
148 | ||
149 | this.initialize() | |
150 | } | |
151 | ||
152 | duration () { | |
153 | return this._duration || this.videoElement.duration || 0 | |
154 | } | |
155 | ||
156 | seekable () { | |
157 | if (this.hls.media) { | |
158 | if (!this.isLive) { | |
159 | return this.vjs.createTimeRanges(0, this.hls.media.duration) | |
160 | } | |
161 | ||
162 | // Video.js doesn't seem to like floating point timeranges | |
163 | const startTime = Math.round(this.hls.media.duration - this.dvrDuration) | |
164 | const endTime = Math.round(this.hls.media.duration - this.edgeMargin) | |
165 | ||
166 | return this.vjs.createTimeRanges(startTime, endTime) | |
167 | } | |
168 | ||
169 | return this.vjs.createTimeRanges() | |
170 | } | |
171 | ||
172 | // See comment for `initialize` method. | |
173 | dispose () { | |
174 | this.videoElement.removeEventListener('play', this.handlers.play) | |
175 | this.videoElement.textTracks.removeEventListener('addtrack', this.handlers.addtrack) | |
176 | this.videoElement.removeEventListener('playing', this.handlers.playing) | |
177 | ||
178 | this.player.textTracks().removeEventListener('change', this.handlers.textTracksChange) | |
179 | this.uiTextTrackHandled = false | |
180 | ||
181 | this.player.audioTracks().removeEventListener('change', this.handlers.audioTracksChange) | |
182 | ||
183 | this.hls.destroy() | |
184 | } | |
185 | ||
186 | static addHook (type: string, callback: Function) { | |
187 | Html5Hlsjs.hooks[ type ] = this.hooks[ type ] || [] | |
188 | Html5Hlsjs.hooks[ type ].push(callback) | |
189 | } | |
190 | ||
191 | static removeHook (type: string, callback: Function) { | |
192 | if (Html5Hlsjs.hooks[ type ] === undefined) return false | |
193 | ||
194 | const index = Html5Hlsjs.hooks[ type ].indexOf(callback) | |
195 | if (index === -1) return false | |
196 | ||
197 | Html5Hlsjs.hooks[ type ].splice(index, 1) | |
198 | ||
199 | return true | |
200 | } | |
201 | ||
202 | private _executeHooksFor (type: string) { | |
203 | if (Html5Hlsjs.hooks[ type ] === undefined) { | |
204 | return | |
205 | } | |
206 | ||
207 | // ES3 and IE < 9 | |
208 | for (let i = 0; i < Html5Hlsjs.hooks[ type ].length; i++) { | |
209 | Html5Hlsjs.hooks[ type ][ i ](this.player, this.hls) | |
210 | } | |
211 | } | |
212 | ||
213 | private _handleMediaError (error: any) { | |
214 | if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 1) { | |
215 | console.info('trying to recover media error') | |
216 | this.hls.recoverMediaError() | |
217 | return | |
218 | } | |
219 | ||
220 | if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 2) { | |
221 | console.info('2nd try to recover media error (by swapping audio codec') | |
222 | this.hls.swapAudioCodec() | |
223 | this.hls.recoverMediaError() | |
224 | return | |
225 | } | |
226 | ||
227 | if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] > 2) { | |
228 | console.info('bubbling media error up to VIDEOJS') | |
229 | this.tech.error = () => error | |
230 | this.tech.trigger('error') | |
231 | return | |
232 | } | |
233 | } | |
234 | ||
235 | private _onError (_event: any, data: Hlsjs.errorData) { | |
236 | const error: { message: string, code?: number } = { | |
237 | message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}` | |
238 | } | |
239 | console.error(error.message) | |
240 | ||
241 | // increment/set error count | |
242 | if (this.errorCounts[ data.type ]) this.errorCounts[ data.type ] += 1 | |
243 | else this.errorCounts[ data.type ] = 1 | |
244 | ||
245 | // Implement simple error handling based on hls.js documentation | |
246 | // https://github.com/dailymotion/hls.js/blob/master/API.md#fifth-step-error-handling | |
247 | if (data.fatal) { | |
248 | switch (data.type) { | |
249 | case Hlsjs.ErrorTypes.NETWORK_ERROR: | |
250 | console.info('bubbling network error up to VIDEOJS') | |
251 | error.code = 2 | |
252 | this.tech.error = () => error as any | |
253 | this.tech.trigger('error') | |
254 | break | |
255 | ||
256 | case Hlsjs.ErrorTypes.MEDIA_ERROR: | |
257 | error.code = 3 | |
258 | this._handleMediaError(error) | |
259 | break | |
260 | ||
261 | default: | |
262 | // cannot recover | |
263 | this.hls.destroy() | |
264 | console.info('bubbling error up to VIDEOJS') | |
265 | this.tech.error = () => error as any | |
266 | this.tech.trigger('error') | |
267 | break | |
268 | } | |
269 | } | |
270 | } | |
271 | ||
272 | private switchQuality (qualityId: number) { | |
273 | this.hls.nextLevel = qualityId | |
274 | } | |
275 | ||
276 | private _levelLabel (level: Hlsjs.Level) { | |
277 | if (this.player.srOptions_.levelLabelHandler) { | |
278 | return this.player.srOptions_.levelLabelHandler(level) | |
279 | } | |
280 | ||
281 | if (level.height) return level.height + 'p' | |
282 | if (level.width) return Math.round(level.width * 9 / 16) + 'p' | |
283 | if (level.bitrate) return (level.bitrate / 1000) + 'kbps' | |
284 | ||
285 | return 0 | |
286 | } | |
287 | ||
288 | private _relayQualityChange (qualityLevels: QualityLevels) { | |
289 | // Determine if it is "Auto" (all tracks enabled) | |
290 | let isAuto = true | |
291 | ||
292 | for (let i = 0; i < qualityLevels.length; i++) { | |
293 | if (!qualityLevels[ i ]._enabled) { | |
294 | isAuto = false | |
295 | break | |
296 | } | |
297 | } | |
298 | ||
299 | // Interact with ME | |
300 | if (isAuto) { | |
301 | this.hls.currentLevel = -1 | |
302 | return | |
303 | } | |
304 | ||
305 | // Find ID of highest enabled track | |
306 | let selectedTrack: number | |
307 | ||
308 | for (selectedTrack = qualityLevels.length - 1; selectedTrack >= 0; selectedTrack--) { | |
309 | if (qualityLevels[ selectedTrack ]._enabled) { | |
310 | break | |
311 | } | |
312 | } | |
313 | ||
314 | this.hls.currentLevel = selectedTrack | |
315 | } | |
316 | ||
317 | private _handleQualityLevels () { | |
318 | if (!this.metadata) return | |
319 | ||
320 | const qualityLevels = this.player.qualityLevels && this.player.qualityLevels() | |
321 | if (!qualityLevels) return | |
322 | ||
323 | for (let i = 0; i < this.metadata.levels.length; i++) { | |
324 | const details = this.metadata.levels[ i ] | |
325 | const representation: QualityLevelRepresentation = { | |
326 | id: i, | |
327 | width: details.width, | |
328 | height: details.height, | |
329 | bandwidth: details.bitrate, | |
330 | bitrate: details.bitrate, | |
331 | _enabled: true | |
332 | } | |
333 | ||
334 | const self = this | |
335 | representation.enabled = function (this: QualityLevels, level: number, toggle?: boolean) { | |
336 | // Brightcove switcher works TextTracks-style (enable tracks that it wants to ABR on) | |
337 | if (typeof toggle === 'boolean') { | |
338 | this[ level ]._enabled = toggle | |
339 | self._relayQualityChange(this) | |
340 | } | |
341 | ||
342 | return this[ level ]._enabled | |
343 | } | |
344 | ||
345 | qualityLevels.addQualityLevel(representation) | |
346 | } | |
347 | } | |
348 | ||
349 | private _notifyVideoQualities () { | |
350 | if (!this.metadata) return | |
351 | const cleanTracklist = [] | |
352 | ||
353 | if (this.metadata.levels.length > 1) { | |
354 | const autoLevel = { | |
355 | id: -1, | |
356 | label: 'auto', | |
357 | selected: this.hls.manualLevel === -1 | |
358 | } | |
359 | cleanTracklist.push(autoLevel) | |
360 | } | |
361 | ||
362 | this.metadata.levels.forEach((level, index) => { | |
363 | // Don't write in level (shared reference with Hls.js) | |
364 | const quality = { | |
365 | id: index, | |
366 | selected: index === this.hls.manualLevel, | |
367 | label: this._levelLabel(level) | |
368 | } | |
369 | ||
370 | cleanTracklist.push(quality) | |
371 | }) | |
372 | ||
373 | const payload = { | |
374 | qualityData: { video: cleanTracklist }, | |
375 | qualitySwitchCallback: this.switchQuality.bind(this) | |
376 | } | |
377 | ||
378 | this.tech.trigger('loadedqualitydata', payload) | |
379 | ||
380 | // Self-de-register so we don't raise the payload multiple times | |
381 | this.videoElement.removeEventListener('playing', this.handlers.playing) | |
382 | } | |
383 | ||
384 | private _updateSelectedAudioTrack () { | |
385 | const playerAudioTracks = this.tech.audioTracks() | |
386 | for (let j = 0; j < playerAudioTracks.length; j++) { | |
387 | // FIXME: typings | |
388 | if ((playerAudioTracks[ j ] as any).enabled) { | |
389 | this.hls.audioTrack = j | |
390 | break | |
391 | } | |
392 | } | |
393 | } | |
394 | ||
395 | private _onAudioTracks () { | |
396 | const hlsAudioTracks = this.hls.audioTracks as (AudioTrack & { name?: string, lang?: string })[] // FIXME typings | |
397 | const playerAudioTracks = this.tech.audioTracks() | |
398 | ||
399 | if (hlsAudioTracks.length > 1 && playerAudioTracks.length === 0) { | |
400 | // Add Hls.js audio tracks if not added yet | |
401 | for (let i = 0; i < hlsAudioTracks.length; i++) { | |
402 | playerAudioTracks.addTrack(new this.vjs.AudioTrack({ | |
403 | id: i.toString(), | |
404 | kind: 'alternative', | |
405 | label: hlsAudioTracks[ i ].name || hlsAudioTracks[ i ].lang, | |
406 | language: hlsAudioTracks[ i ].lang, | |
407 | enabled: i === this.hls.audioTrack | |
408 | })) | |
409 | } | |
410 | ||
411 | // Handle audio track change event | |
412 | this.handlers.audioTracksChange = this._updateSelectedAudioTrack.bind(this) | |
413 | playerAudioTracks.addEventListener('change', this.handlers.audioTracksChange) | |
414 | } | |
415 | } | |
416 | ||
417 | private _getTextTrackLabel (textTrack: TextTrack) { | |
418 | // Label here is readable label and is optional (used in the UI so if it is there it should be different) | |
419 | return textTrack.label ? textTrack.label : textTrack.language | |
420 | } | |
421 | ||
422 | private _isSameTextTrack (track1: TextTrack, track2: TextTrack) { | |
423 | return this._getTextTrackLabel(track1) === this._getTextTrackLabel(track2) | |
424 | && track1.kind === track2.kind | |
425 | } | |
426 | ||
427 | private _updateSelectedTextTrack () { | |
428 | const playerTextTracks = this.player.textTracks() | |
429 | let activeTrack: TextTrack = null | |
430 | ||
431 | for (let j = 0; j < playerTextTracks.length; j++) { | |
432 | if (playerTextTracks[ j ].mode === 'showing') { | |
433 | activeTrack = playerTextTracks[ j ] | |
434 | break | |
435 | } | |
436 | } | |
437 | ||
438 | const hlsjsTracks = this.videoElement.textTracks | |
439 | for (let k = 0; k < hlsjsTracks.length; k++) { | |
440 | if (hlsjsTracks[ k ].kind === 'subtitles' || hlsjsTracks[ k ].kind === 'captions') { | |
441 | hlsjsTracks[ k ].mode = activeTrack && this._isSameTextTrack(hlsjsTracks[ k ], activeTrack) | |
442 | ? 'showing' | |
443 | : 'disabled' | |
444 | } | |
445 | } | |
446 | } | |
447 | ||
448 | private _startLoad () { | |
449 | this.hls.startLoad(-1) | |
450 | this.videoElement.removeEventListener('play', this.handlers.play) | |
451 | } | |
452 | ||
453 | private _oneLevelObjClone (obj: object) { | |
454 | const result = {} | |
455 | const objKeys = Object.keys(obj) | |
456 | for (let i = 0; i < objKeys.length; i++) { | |
457 | result[ objKeys[ i ] ] = obj[ objKeys[ i ] ] | |
458 | } | |
459 | ||
460 | return result | |
461 | } | |
462 | ||
463 | private _filterDisplayableTextTracks (textTracks: TextTrackList) { | |
464 | const displayableTracks = [] | |
465 | ||
466 | // Filter out tracks that is displayable (captions or subtitles) | |
467 | for (let idx = 0; idx < textTracks.length; idx++) { | |
468 | if (textTracks[ idx ].kind === 'subtitles' || textTracks[ idx ].kind === 'captions') { | |
469 | displayableTracks.push(textTracks[ idx ]) | |
470 | } | |
471 | } | |
472 | ||
473 | return displayableTracks | |
474 | } | |
475 | ||
476 | private _updateTextTrackList () { | |
477 | const displayableTracks = this._filterDisplayableTextTracks(this.videoElement.textTracks) | |
478 | const playerTextTracks = this.player.textTracks() | |
479 | ||
480 | // Add stubs to make the caption switcher shows up | |
481 | // Adding the Hls.js text track in will make us have double captions | |
482 | for (let idx = 0; idx < displayableTracks.length; idx++) { | |
483 | let isAdded = false | |
484 | ||
485 | for (let jdx = 0; jdx < playerTextTracks.length; jdx++) { | |
486 | if (this._isSameTextTrack(displayableTracks[ idx ], playerTextTracks[ jdx ])) { | |
487 | isAdded = true | |
488 | break | |
489 | } | |
490 | } | |
491 | ||
492 | if (!isAdded) { | |
493 | const hlsjsTextTrack = displayableTracks[ idx ] | |
494 | this.player.addRemoteTextTrack({ | |
495 | kind: hlsjsTextTrack.kind as videojs.TextTrack.Kind, | |
496 | label: this._getTextTrackLabel(hlsjsTextTrack), | |
497 | language: hlsjsTextTrack.language, | |
498 | srclang: hlsjsTextTrack.language | |
499 | }, false) | |
500 | } | |
501 | } | |
502 | ||
503 | // Handle UI switching | |
504 | this._updateSelectedTextTrack() | |
505 | ||
506 | if (!this.uiTextTrackHandled) { | |
507 | this.handlers.textTracksChange = this._updateSelectedTextTrack.bind(this) | |
508 | playerTextTracks.addEventListener('change', this.handlers.textTracksChange) | |
509 | ||
510 | this.uiTextTrackHandled = true | |
511 | } | |
512 | } | |
513 | ||
514 | private _onMetaData (_event: any, data: Hlsjs.manifestLoadedData) { | |
515 | // This could arrive before 'loadedqualitydata' handlers is registered, remember it so we can raise it later | |
516 | this.metadata = data as any | |
517 | this._handleQualityLevels() | |
518 | } | |
519 | ||
520 | private _createCueHandler (captionConfig: any) { | |
521 | return { | |
522 | newCue: (track: any, startTime: number, endTime: number, captionScreen: { rows: any[] }) => { | |
523 | let row: any | |
524 | let cue: VTTCue | |
525 | let text: string | |
526 | const VTTCue = (window as any).VTTCue || (window as any).TextTrackCue | |
527 | ||
528 | for (let r = 0; r < captionScreen.rows.length; r++) { | |
529 | row = captionScreen.rows[ r ] | |
530 | text = '' | |
531 | ||
532 | if (!row.isEmpty()) { | |
533 | for (let c = 0; c < row.chars.length; c++) { | |
534 | text += row.chars[ c ].ucharj | |
535 | } | |
536 | ||
537 | cue = new VTTCue(startTime, endTime, text.trim()) | |
538 | ||
539 | // typeof null === 'object' | |
540 | if (captionConfig != null && typeof captionConfig === 'object') { | |
541 | // Copy client overridden property into the cue object | |
542 | const configKeys = Object.keys(captionConfig) | |
543 | ||
544 | for (let k = 0; k < configKeys.length; k++) { | |
545 | cue[ configKeys[ k ] ] = captionConfig[ configKeys[ k ] ] | |
546 | } | |
547 | } | |
548 | track.addCue(cue) | |
549 | if (endTime === startTime) track.addCue(new VTTCue(endTime + 5, '')) | |
550 | } | |
551 | } | |
552 | } | |
553 | } | |
554 | } | |
555 | ||
556 | private _initHlsjs () { | |
557 | const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions | |
558 | const srOptions_ = this.player.srOptions_ | |
559 | ||
560 | const hlsjsConfigRef = srOptions_ && srOptions_.hlsjsConfig || techOptions.hlsjsConfig | |
561 | // Hls.js will write to the reference thus change the object for later streams | |
562 | this.hlsjsConfig = hlsjsConfigRef ? this._oneLevelObjClone(hlsjsConfigRef) : {} | |
563 | ||
564 | if ([ '', 'auto' ].includes(this.videoElement.preload) && !this.videoElement.autoplay && this.hlsjsConfig.autoStartLoad === undefined) { | |
565 | this.hlsjsConfig.autoStartLoad = false | |
566 | } | |
567 | ||
568 | const captionConfig = srOptions_ && srOptions_.captionConfig || techOptions.captionConfig | |
569 | if (captionConfig) { | |
570 | this.hlsjsConfig.cueHandler = this._createCueHandler(captionConfig) | |
571 | } | |
572 | ||
573 | // If the user explicitly sets autoStartLoad to false, we're not going to enter the if block above | |
574 | // That's why we have a separate if block here to set the 'play' listener | |
575 | if (this.hlsjsConfig.autoStartLoad === false) { | |
576 | this.handlers.play = this._startLoad.bind(this) | |
577 | this.videoElement.addEventListener('play', this.handlers.play) | |
578 | } | |
579 | ||
580 | // _notifyVideoQualities sometimes runs before the quality picker event handler is registered -> no video switcher | |
581 | this.handlers.playing = this._notifyVideoQualities.bind(this) | |
582 | this.videoElement.addEventListener('playing', this.handlers.playing) | |
583 | ||
584 | this.hls = new Hlsjs(this.hlsjsConfig) | |
585 | ||
586 | this._executeHooksFor('beforeinitialize') | |
587 | ||
588 | this.hls.on(Hlsjs.Events.ERROR, (event, data) => this._onError(event, data)) | |
589 | this.hls.on(Hlsjs.Events.AUDIO_TRACKS_UPDATED, () => this._onAudioTracks()) | |
590 | this.hls.on(Hlsjs.Events.MANIFEST_PARSED, (event, data) => this._onMetaData(event, data as any)) // FIXME: typings | |
591 | this.hls.on(Hlsjs.Events.LEVEL_LOADED, (event, data) => { | |
592 | // The DVR plugin will auto seek to "live edge" on start up | |
593 | if (this.hlsjsConfig.liveSyncDuration) { | |
594 | this.edgeMargin = this.hlsjsConfig.liveSyncDuration | |
595 | } else if (this.hlsjsConfig.liveSyncDurationCount) { | |
596 | this.edgeMargin = this.hlsjsConfig.liveSyncDurationCount * data.details.targetduration | |
597 | } | |
598 | ||
599 | this.isLive = data.details.live | |
600 | this.dvrDuration = data.details.totalduration | |
601 | this._duration = this.isLive ? Infinity : data.details.totalduration | |
602 | }) | |
603 | this.hls.once(Hlsjs.Events.FRAG_LOADED, () => { | |
604 | // Emit custom 'loadedmetadata' event for parity with `videojs-contrib-hls` | |
605 | // Ref: https://github.com/videojs/videojs-contrib-hls#loadedmetadata | |
606 | this.tech.trigger('loadedmetadata') | |
607 | }) | |
608 | ||
609 | this.hls.attachMedia(this.videoElement) | |
610 | ||
611 | this.handlers.addtrack = this._updateTextTrackList.bind(this) | |
612 | this.videoElement.textTracks.addEventListener('addtrack', this.handlers.addtrack) | |
613 | ||
614 | this.hls.loadSource(this.source.src) | |
615 | } | |
616 | ||
617 | private initialize () { | |
618 | this._initHlsjs() | |
619 | } | |
620 | } | |
621 | ||
622 | export { | |
623 | Html5Hlsjs, | |
624 | registerSourceHandler, | |
625 | registerConfigPlugin | |
626 | } |