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