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
4 import * as Hlsjs from 'hls.js/dist/hls.light.js'
5 import videojs from 'video.js'
6 import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, VideoJSTechHLS } from '../peertube-videojs-typings'
9 [ type: string ]: number
16 type CustomAudioTrack = Hlsjs.HlsAudioTrack & { name?: string, lang?: string }
18 const registerSourceHandler = function (vjs: typeof videojs) {
19 if (!Hlsjs.isSupported()) {
20 console.warn('Hls.js is not supported in this browser!')
24 const html5 = vjs.getTech('Html5')
27 console.error('Not supported version if video.js')
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
37 if (hlsTypeRE.test(source.type)) return 'probably'
38 if (hlsExtRE.test(source.src)) return 'maybe'
43 handleSource: function (source: videojs.Tech.SourceObject, tech: VideoJSTechHLS) {
44 if (tech.hlsProvider) {
45 tech.hlsProvider.dispose()
48 tech.hlsProvider = new Html5Hlsjs(vjs, source, tech)
50 return tech.hlsProvider
55 (vjs as any).Html5Hlsjs = Html5Hlsjs
58 function hlsjsConfigHandler (this: videojs.Player, options: HlsjsConfigHandlerOptions) {
63 if (!player.srOptions_) {
64 player.srOptions_ = {}
67 if (!player.srOptions_.hlsjsConfig) {
68 player.srOptions_.hlsjsConfig = options.hlsjsConfig
71 if (!player.srOptions_.captionConfig) {
72 player.srOptions_.captionConfig = options.captionConfig
75 if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
76 player.srOptions_.levelLabelHandler = options.levelLabelHandler
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)
87 private static readonly hooks: { [id: string]: Function[] } = {}
89 private readonly videoElement: HTMLVideoElement
90 private readonly errorCounts: ErrorCounts = {}
91 private readonly player: videojs.Player
92 private readonly tech: videojs.Tech
93 private readonly source: videojs.Tech.SourceObject
94 private readonly vjs: typeof videojs
96 private hls: Hlsjs & { manualLevel?: number, audioTrack?: any, audioTracks?: CustomAudioTrack[] } // FIXME: typings
97 private hlsjsConfig: Partial<Hlsjs.Config & { cueHandler: any }> = null
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
105 private handlers: { [ id in 'play' | 'playing' | 'textTracksChange' | 'audioTracksChange' ]: EventListener } = {
108 textTracksChange: null,
109 audioTracksChange: null
112 private uiTextTrackHandled = false
114 constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) {
119 (this.tech as any).name_ = 'Hlsjs'
121 this.videoElement = tech.el() as HTMLVideoElement
122 this.player = vjs((tech.options_ as any).playerId)
124 this.videoElement.addEventListener('error', event => {
126 const mediaError = ((event.currentTarget || event.target) as HTMLVideoElement).error
128 if (!mediaError) return
130 console.log(mediaError)
131 switch (mediaError.code) {
132 case mediaError.MEDIA_ERR_ABORTED:
133 errorTxt = 'You aborted the video playback'
135 case mediaError.MEDIA_ERR_DECODE:
136 errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support'
137 this._handleMediaError(mediaError)
139 case mediaError.MEDIA_ERR_NETWORK:
140 errorTxt = 'A network error caused the video download to fail part-way'
142 case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
143 errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported'
147 errorTxt = mediaError.message
150 console.error('MEDIA_ERROR: ', errorTxt)
157 return this._duration || this.videoElement.duration || 0
161 if (this.hls.media) {
163 return this.vjs.createTimeRanges(0, this.hls.media.duration)
166 // Video.js doesn't seem to like floating point timeranges
167 const startTime = Math.round(this.hls.media.duration - this.dvrDuration)
168 const endTime = Math.round(this.hls.media.duration - this.edgeMargin)
170 return this.vjs.createTimeRanges(startTime, endTime)
173 return this.vjs.createTimeRanges()
176 // See comment for `initialize` method.
178 this.videoElement.removeEventListener('play', this.handlers.play)
179 this.videoElement.removeEventListener('playing', this.handlers.playing)
181 this.player.textTracks().removeEventListener('change', this.handlers.textTracksChange)
182 this.uiTextTrackHandled = false
187 static addHook (type: string, callback: Function) {
188 Html5Hlsjs.hooks[ type ] = this.hooks[ type ] || []
189 Html5Hlsjs.hooks[ type ].push(callback)
192 static removeHook (type: string, callback: Function) {
193 if (Html5Hlsjs.hooks[ type ] === undefined) return false
195 const index = Html5Hlsjs.hooks[ type ].indexOf(callback)
196 if (index === -1) return false
198 Html5Hlsjs.hooks[ type ].splice(index, 1)
203 private _executeHooksFor (type: string) {
204 if (Html5Hlsjs.hooks[ type ] === undefined) {
209 for (let i = 0; i < Html5Hlsjs.hooks[ type ].length; i++) {
210 Html5Hlsjs.hooks[ type ][ i ](this.player, this.hls)
214 private _handleMediaError (error: any) {
215 if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 1) {
216 console.info('trying to recover media error')
217 this.hls.recoverMediaError()
221 if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 2) {
222 console.info('2nd try to recover media error (by swapping audio codec')
223 this.hls.swapAudioCodec()
224 this.hls.recoverMediaError()
228 if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] > 2) {
229 console.info('bubbling media error up to VIDEOJS')
231 this.tech.error = () => error
232 this.tech.trigger('error')
237 private _handleNetworkError (error: any) {
238 if (this.errorCounts[ Hlsjs.ErrorTypes.NETWORK_ERROR] <= 5) {
239 console.info('trying to recover network error')
241 // Wait 1 second and retry
242 setTimeout(() => this.hls.startLoad(), 1000)
244 // Reset error count on success
245 this.hls.once(Hlsjs.Events.FRAG_LOADED, () => {
246 this.errorCounts[ Hlsjs.ErrorTypes.NETWORK_ERROR] = 0
252 console.info('bubbling network error up to VIDEOJS')
254 this.tech.error = () => error
255 this.tech.trigger('error')
258 private _onError (_event: any, data: Hlsjs.errorData) {
259 const error: { message: string, code?: number } = {
260 message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}`
262 console.error(error.message)
264 // increment/set error count
265 if (this.errorCounts[ data.type ]) this.errorCounts[ data.type ] += 1
266 else this.errorCounts[ data.type ] = 1
268 if (!data.fatal) return
270 if (data.type === Hlsjs.ErrorTypes.NETWORK_ERROR) {
272 this._handleNetworkError(error)
273 } else if (data.type === Hlsjs.ErrorTypes.MEDIA_ERROR && data.details !== 'manifestIncompatibleCodecsError') {
275 this._handleMediaError(error)
278 console.info('bubbling error up to VIDEOJS')
279 this.tech.error = () => error as any
280 this.tech.trigger('error')
284 private switchQuality (qualityId: number) {
285 this.hls.nextLevel = qualityId
288 private _levelLabel (level: Hlsjs.Level) {
289 if (this.player.srOptions_.levelLabelHandler) {
290 return this.player.srOptions_.levelLabelHandler(level)
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'
300 private _relayQualityChange (qualityLevels: QualityLevels) {
301 // Determine if it is "Auto" (all tracks enabled)
304 for (let i = 0; i < qualityLevels.length; i++) {
305 if (!qualityLevels[ i ]._enabled) {
313 this.hls.currentLevel = -1
317 // Find ID of highest enabled track
318 let selectedTrack: number
320 for (selectedTrack = qualityLevels.length - 1; selectedTrack >= 0; selectedTrack--) {
321 if (qualityLevels[ selectedTrack ]._enabled) {
326 this.hls.currentLevel = selectedTrack
329 private _handleQualityLevels () {
330 if (!this.metadata) return
332 const qualityLevels = this.player.qualityLevels && this.player.qualityLevels()
333 if (!qualityLevels) return
335 for (let i = 0; i < this.metadata.levels.length; i++) {
336 const details = this.metadata.levels[ i ]
337 const representation: QualityLevelRepresentation = {
339 width: details.width,
340 height: details.height,
341 bandwidth: details.bitrate,
342 bitrate: details.bitrate,
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') {
350 this[ level ]._enabled = toggle
351 self._relayQualityChange(this)
354 return this[ level ]._enabled
357 qualityLevels.addQualityLevel(representation)
361 private _notifyVideoQualities () {
362 if (!this.metadata) return
363 const cleanTracklist = []
365 if (this.metadata.levels.length > 1) {
369 selected: this.hls.manualLevel === -1
371 cleanTracklist.push(autoLevel)
374 this.metadata.levels.forEach((level, index) => {
375 // Don't write in level (shared reference with Hls.js)
378 selected: index === this.hls.manualLevel,
379 label: this._levelLabel(level)
382 cleanTracklist.push(quality)
386 qualityData: { video: cleanTracklist },
387 qualitySwitchCallback: this.switchQuality.bind(this)
390 this.tech.trigger('loadedqualitydata', payload)
392 // Self-de-register so we don't raise the payload multiple times
393 this.videoElement.removeEventListener('playing', this.handlers.playing)
396 private _updateSelectedAudioTrack () {
397 const playerAudioTracks = this.tech.audioTracks()
398 for (let j = 0; j < playerAudioTracks.length; j++) {
400 if ((playerAudioTracks[ j ] as any).enabled) {
401 this.hls.audioTrack = j
407 private _onAudioTracks () {
408 const hlsAudioTracks = this.hls.audioTracks
409 const playerAudioTracks = this.tech.audioTracks()
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({
417 label: hlsAudioTracks[ i ].name || hlsAudioTracks[ i ].lang,
418 language: hlsAudioTracks[ i ].lang,
419 enabled: i === this.hls.audioTrack
423 // Handle audio track change event
424 this.handlers.audioTracksChange = this._updateSelectedAudioTrack.bind(this)
425 playerAudioTracks.addEventListener('change', this.handlers.audioTracksChange)
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
434 private _isSameTextTrack (track1: TextTrack, track2: TextTrack) {
435 return this._getTextTrackLabel(track1) === this._getTextTrackLabel(track2)
436 && track1.kind === track2.kind
439 private _updateSelectedTextTrack () {
440 const playerTextTracks = this.player.textTracks()
441 let activeTrack: TextTrack = null
443 for (let j = 0; j < playerTextTracks.length; j++) {
444 if (playerTextTracks[ j ].mode === 'showing') {
445 activeTrack = playerTextTracks[ j ]
450 const hlsjsTracks = this.videoElement.textTracks
451 for (let k = 0; k < hlsjsTracks.length; k++) {
452 if (hlsjsTracks[ k ].kind === 'subtitles' || hlsjsTracks[ k ].kind === 'captions') {
453 hlsjsTracks[ k ].mode = activeTrack && this._isSameTextTrack(hlsjsTracks[ k ], activeTrack)
460 private _startLoad () {
461 this.hls.startLoad(-1)
462 this.videoElement.removeEventListener('play', this.handlers.play)
465 private _oneLevelObjClone (obj: object) {
467 const objKeys = Object.keys(obj)
468 for (let i = 0; i < objKeys.length; i++) {
469 result[ objKeys[ i ] ] = obj[ objKeys[ i ] ]
475 private _filterDisplayableTextTracks (textTracks: TextTrackList) {
476 const displayableTracks = []
478 // Filter out tracks that is displayable (captions or subtitles)
479 for (let idx = 0; idx < textTracks.length; idx++) {
480 if (textTracks[ idx ].kind === 'subtitles' || textTracks[ idx ].kind === 'captions') {
481 displayableTracks.push(textTracks[ idx ])
485 return displayableTracks
488 private _updateTextTrackList () {
489 const displayableTracks = this._filterDisplayableTextTracks(this.videoElement.textTracks)
490 const playerTextTracks = this.player.textTracks()
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++) {
497 for (let jdx = 0; jdx < playerTextTracks.length; jdx++) {
498 if (this._isSameTextTrack(displayableTracks[ idx ], playerTextTracks[ jdx ])) {
505 const hlsjsTextTrack = displayableTracks[ idx ]
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
515 // Handle UI switching
516 this._updateSelectedTextTrack()
518 if (!this.uiTextTrackHandled) {
519 this.handlers.textTracksChange = this._updateSelectedTextTrack.bind(this)
520 playerTextTracks.addEventListener('change', this.handlers.textTracksChange)
522 this.uiTextTrackHandled = true
526 private _onMetaData (_event: any, data: Hlsjs.manifestLoadedData) {
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()
532 private _createCueHandler (captionConfig: any) {
534 newCue: (track: any, startTime: number, endTime: number, captionScreen: { rows: any[] }) => {
538 const VTTCue = (window as any).VTTCue || (window as any).TextTrackCue
540 for (let r = 0; r < captionScreen.rows.length; r++) {
541 row = captionScreen.rows[ r ]
544 if (!row.isEmpty()) {
545 for (let c = 0; c < row.chars.length; c++) {
546 text += row.chars[ c ].ucharj
549 cue = new VTTCue(startTime, endTime, text.trim())
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)
556 for (let k = 0; k < configKeys.length; k++) {
557 cue[ configKeys[ k ] ] = captionConfig[ configKeys[ k ] ]
561 if (endTime === startTime) track.addCue(new VTTCue(endTime + 5, ''))
568 private _initHlsjs () {
569 const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions
570 const srOptions_ = this.player.srOptions_
572 const hlsjsConfigRef = srOptions_ && srOptions_.hlsjsConfig || techOptions.hlsjsConfig
573 // Hls.js will write to the reference thus change the object for later streams
574 this.hlsjsConfig = hlsjsConfigRef ? this._oneLevelObjClone(hlsjsConfigRef) : {}
576 if ([ '', 'auto' ].includes(this.videoElement.preload) && !this.videoElement.autoplay && this.hlsjsConfig.autoStartLoad === undefined) {
577 this.hlsjsConfig.autoStartLoad = false
580 const captionConfig = srOptions_ && srOptions_.captionConfig || techOptions.captionConfig
582 this.hlsjsConfig.cueHandler = this._createCueHandler(captionConfig)
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)
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)
596 this.hls = new Hlsjs(this.hlsjsConfig)
598 this._executeHooksFor('beforeinitialize')
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
611 this.isLive = data.details.live
612 this.dvrDuration = data.details.totalduration
613 this._duration = this.isLive ? Infinity : data.details.totalduration
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')
621 this.hls.attachMedia(this.videoElement)
623 this.hls.loadSource(this.source.src)
626 private initialize () {
633 registerSourceHandler,