@gcorevideo/player 2.4.0 → 2.4.2

package/src/plugins/dash-playback/DashPlayback.ts

@@ -2,208 +2,228 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import { Events, HTML5Video, Log, Playback, /* PlayerError, */ Utils } from '@clappr/core';
-import assert from 'assert'; // uses Node.js's assert types
-import DASHJS,  {
+import {
+  Events,
+  HTML5Video,
+  Log,
+  Playback,
+  Utils,
+} from '@clappr/core'
+import assert from 'assert' // uses Node.js's assert types
+import DASHJS, {
   ErrorEvent as DashErrorEvent,
   PlaybackErrorEvent as DashPlaybackErrorEvent,
   type BitrateInfo,
   MetricEvent as DashMetricEvent,
-  IManifestInfo
-} from 'dashjs';
-import { trace } from '../../trace/index.js';
+  IManifestInfo,
+} from 'dashjs'
+import { trace } from '../../trace/index.js'
 
-import { Duration, TimePosition, TimeValue } from '../../playback.types.js';
+import { Duration, TimePosition, TimeValue } from '../../playback.types.js'
 
-const AUTO = -1;
+const AUTO = -1
 
-const { now } = Utils;
+const { now } = Utils
 
 type PlaybackType =
   | typeof Playback.VOD
   | typeof Playback.LIVE
   | typeof Playback.AOD
-  | typeof Playback.NO_OP;
+  | typeof Playback.NO_OP
 
-type PlaylistType = string; // TODO union
+type PlaylistType = string // TODO union
 
 type QualityLevel = {
-  id: number;
-  level: BitrateInfo;
-};
+  id: number
+  level: BitrateInfo
+}
 
 type LocalTimeCorrelation = {
-  local: number;
-  remote: number;
+  local: number
+  remote: number
 }
 
-const T = "DashPlayback";
+const T = 'DashPlayback'
 
 export default class DashPlayback extends HTML5Video {
-  _levels: QualityLevel[] | null = null;
+  _levels: QualityLevel[] | null = null
 
-  _currentLevel: number | null = null;
+  _currentLevel: number | null = null
 
-  _durationExcludesAfterLiveSyncPoint: boolean = false;
+  _durationExcludesAfterLiveSyncPoint: boolean = false
 
-  _isReadyState: boolean = false;
+  _isReadyState: boolean = false
 
-  _playableRegionDuration: number = 0;
+  _playableRegionDuration: number = 0
 
-  _playableRegionStartTime: number = 0;
+  _playableRegionStartTime: number = 0
 
-  _playbackType: PlaybackType = Playback.VOD;
+  _playbackType: PlaybackType = Playback.VOD
 
-  _playlistType: PlaylistType | null = null;
+  _playlistType: PlaylistType | null = null
 
   // #EXT-X-PROGRAM-DATE-TIME
-  _programDateTime: TimeValue = 0;
+  _programDateTime: TimeValue = 0
 
-  _dash: DASHJS.MediaPlayerClass | null = null;
+  _dash: DASHJS.MediaPlayerClass | null = null
 
-  _extrapolatedWindowDuration: number = 0;
+  _extrapolatedWindowDuration: number = 0
 
-  _extrapolatedWindowNumSegments: number = 0;
+  _extrapolatedWindowNumSegments: number = 0
 
-  _lastDuration: Duration | null = null;
+  _lastDuration: Duration | null = null
 
-  _lastTimeUpdate: TimePosition = { current: 0, total: 0 };
+  _lastTimeUpdate: TimePosition = { current: 0, total: 0 }
 
-  _localStartTimeCorrelation: LocalTimeCorrelation | null = null;
+  _localStartTimeCorrelation: LocalTimeCorrelation | null = null
 
-  _localEndTimeCorrelation: LocalTimeCorrelation | null = null;
+  _localEndTimeCorrelation: LocalTimeCorrelation | null = null
 
-  _recoverAttemptsRemaining: number = 0;
+  _recoverAttemptsRemaining: number = 0
 
-  _recoveredAudioCodecError = false;
+  _recoveredAudioCodecError = false
 
-  _recoveredDecodingError = false;
+  _recoveredDecodingError = false
 
-  startChangeQuality = false;
+  startChangeQuality = false
 
-  manifestInfo: IManifestInfo | null = null;
+  manifestInfo: IManifestInfo | null = null
 
   // #EXT-X-TARGETDURATION
-  _segmentTargetDuration: Duration | null = null;
+  _segmentTargetDuration: Duration | null = null
 
-  _timeUpdateTimer: ReturnType<typeof setInterval> | null = null;
+  _timeUpdateTimer: ReturnType<typeof setInterval> | null = null
 
   get name() {
-    return 'dash';
+    return 'dash'
   }
 
   get levels(): QualityLevel[] {
-    return this._levels || [];
+    return this._levels || []
   }
 
   get currentLevel(): number {
     if (this._currentLevel === null) {
-      return AUTO;
+      return AUTO
     }
     // 0 is a valid level ID
-    return this._currentLevel;
+    return this._currentLevel
   }
 
   get isReady() {
-    return this._isReadyState;
+    return this._isReadyState
   }
 
   set currentLevel(id) {
-    this._currentLevel = id;
+    this._currentLevel = id
 
-    this.trigger(Events.PLAYBACK_LEVEL_SWITCH_START);
+    this.trigger(Events.PLAYBACK_LEVEL_SWITCH_START)
     const cfg = {
       streaming: {
         abr: {
           autoSwitchBitrate: {
             video: id === -1,
           },
-          ABRStrategy: 'abrL2A'
-        }
+          ABRStrategy: 'abrL2A',
+        },
       },
-    };
+    }
 
-    assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to switch levels');
-    const dash = this._dash;
-    this.options.dash && dash.updateSettings({ ...this.options.dash, ...cfg });
+    assert.ok(
+      this._dash,
+      'An instance of dashjs MediaPlayer is required to switch levels',
+    )
+    const dash = this._dash
+    this.options.dash && dash.updateSettings({ ...this.options.dash, ...cfg })
     if (id !== -1) {
-      this._dash.setQualityFor('video', id);
+      this._dash.setQualityFor('video', id)
     }
     if (this._playbackType === Playback.VOD) {
-      const curr_time = this._dash.time();
+      const curr_time = this._dash.time()
 
-      this.startChangeQuality = true;
-      dash.seek(0);
+      this.startChangeQuality = true
+      dash.seek(0)
       setTimeout(() => {
-        dash.seek(curr_time);
-        dash.play();
-        this.startChangeQuality = false;
-      }, 100);
+        dash.seek(curr_time)
+        dash.play()
+        this.startChangeQuality = false
+      }, 100)
     }
   }
 
   get _startTime() {
-    if (this._playbackType === Playback.LIVE && this._playlistType !== 'EVENT') {
-      return this._extrapolatedStartTime;
+    if (
+      this._playbackType === Playback.LIVE &&
+      this._playlistType !== 'EVENT'
+    ) {
+      return this._extrapolatedStartTime
     }
 
-    return this._playableRegionStartTime;
+    return this._playableRegionStartTime
   }
 
   get _now() {
-    return now();
+    return now()
   }
 
   // the time in the video element which should represent the start of the sliding window
   // extrapolated to increase in real time (instead of jumping as the early segments are removed)
   get _extrapolatedStartTime() {
     if (!this._localStartTimeCorrelation) {
-      return this._playableRegionStartTime;
+      return this._playableRegionStartTime
     }
 
-    const corr = this._localStartTimeCorrelation;
-    const timePassed = this._now - corr.local;
-    const extrapolatedWindowStartTime = (corr.remote + timePassed) / 1000;
+    const corr = this._localStartTimeCorrelation
+    const timePassed = this._now - corr.local
+    const extrapolatedWindowStartTime = (corr.remote + timePassed) / 1000
 
     // cap at the end of the extrapolated window duration
-    return Math.min(extrapolatedWindowStartTime, this._playableRegionStartTime + this._extrapolatedWindowDuration);
+    return Math.min(
+      extrapolatedWindowStartTime,
+      this._playableRegionStartTime + this._extrapolatedWindowDuration,
+    )
   }
 
   // the time in the video element which should represent the end of the content
   // extrapolated to increase in real time (instead of jumping as segments are added)
   get _extrapolatedEndTime() {
-    const actualEndTime = this._playableRegionStartTime + this._playableRegionDuration;
+    const actualEndTime =
+      this._playableRegionStartTime + this._playableRegionDuration
 
     if (!this._localEndTimeCorrelation) {
-      return actualEndTime;
+      return actualEndTime
     }
 
-    const corr = this._localEndTimeCorrelation;
-    const timePassed = this._now - corr.local;
-    const extrapolatedEndTime = (corr.remote + timePassed) / 1000;
+    const corr = this._localEndTimeCorrelation
+    const timePassed = this._now - corr.local
+    const extrapolatedEndTime = (corr.remote + timePassed) / 1000
 
-    return Math.max(actualEndTime - this._extrapolatedWindowDuration, Math.min(extrapolatedEndTime, actualEndTime));
+    return Math.max(
+      actualEndTime - this._extrapolatedWindowDuration,
+      Math.min(extrapolatedEndTime, actualEndTime),
+    )
   }
 
   get _duration() {
     if (!this._dash) {
-      return Infinity;
+      return Infinity
     }
-    return this._dash.duration() ?? Infinity;
+    return this._dash.duration() ?? Infinity
   }
 
   constructor(options: any, i18n: string, playerError?: any) {
-    super(options, i18n, playerError);
+    super(options, i18n, playerError)
     // backwards compatibility (TODO: remove on 0.3.0)
     // this.options.playback || (this.options.playback = this.options);
     // The size of the start time extrapolation window measured as a multiple of segments.
     // Should be 2 or higher, or 0 to disable. Should only need to be increased above 2 if more than one segment is
     // removed from the start of the playlist at a time. E.g if the playlist is cached for 10 seconds and new chunks are
     // added/removed every 5.
-    this._extrapolatedWindowNumSegments = this.options.playback?.extrapolatedWindowNumSegments ?? 2;
+    this._extrapolatedWindowNumSegments =
+      this.options.playback?.extrapolatedWindowNumSegments ?? 2
 
     if (this.options.playbackType) {
-      this._playbackType = this.options.playbackType;
+      this._playbackType = this.options.playbackType
     }
     // this._lastTimeUpdate = { current: 0, total: 0 };
     // this._lastDuration = null;
@@ -237,70 +257,85 @@ export default class DashPlayback extends HTML5Video {
     // #EXT-X-PLAYLIST-TYPE
     // this._playlistType = null;
     if (this.options.hlsRecoverAttempts) {
-      this._recoverAttemptsRemaining = this.options.hlsRecoverAttempts;
+      this._recoverAttemptsRemaining = this.options.hlsRecoverAttempts
     }
   }
 
   _setup() {
-    const dash = DASHJS.MediaPlayer().create();
-    this._dash = dash;
-    this._dash.initialize();
+    const dash = DASHJS.MediaPlayer().create()
+    this._dash = dash
+    this._dash.initialize()
 
-    const cfg = this.options.dash ?? {};
+    const cfg = this.options.dash ?? {}
 
-    cfg.streaming = cfg.streaming || {};
-    cfg.streaming.text = cfg.streaming.text || { defaultEnabled: false };
+    cfg.streaming = cfg.streaming || {}
+    cfg.streaming.text = cfg.streaming.text || { defaultEnabled: false }
 
-    this.options.dash && this._dash.updateSettings(cfg);
+    this.options.dash && this._dash.updateSettings(cfg)
 
-    this._dash.attachView(this.el);
+    this._dash.attachView(this.el)
 
-    this._dash.setAutoPlay(false);
-    this._dash.attachSource(this.options.src);
+    this._dash.setAutoPlay(false)
+    this._dash.attachSource(this.options.src)
 
-    this._dash.on(DASHJS.MediaPlayer.events.ERROR, this._onDASHJSSError);
-    this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_ERROR, this._onPlaybackError);
+    this._dash.on(DASHJS.MediaPlayer.events.ERROR, this._onDASHJSSError)
+    this._dash.on(
+      DASHJS.MediaPlayer.events.PLAYBACK_ERROR,
+      this._onPlaybackError,
+    )
 
     this._dash.on(DASHJS.MediaPlayer.events.STREAM_INITIALIZED, () => {
-      const bitrates = dash.getBitrateInfoListFor('video');
+      const bitrates = dash.getBitrateInfoListFor('video')
 
-      this._updatePlaybackType();
-      this._fillLevels(bitrates);
+      this._updatePlaybackType()
+      this._fillLevels(bitrates)
       dash.on(DASHJS.MediaPlayer.events.QUALITY_CHANGE_REQUESTED, (evt) => {
         // TODO
-        assert.ok(this._levels, 'An array of levels is required to change quality');
-        const newLevel = this._levels.find((level) => level.id === evt.newQuality); // TODO or simply this._levels[evt.newQuality]?
-        assert.ok(newLevel, 'A valid level is required to change quality');
-        this.onLevelSwitch(newLevel.level);
-      });
-    });
-
-    this._dash.on(DASHJS.MediaPlayer.events.METRIC_ADDED, (e: DashMetricEvent) => {
-      // Listen for the first manifest request in order to update player UI
-      if ((e.metric as string) === 'DVRInfo') { // TODO fix typings
-        assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to get metrics');
-        const dvrInfo = this._dash.getDashMetrics().getCurrentDVRInfo('video');
-        if (dvrInfo) {
-          // Extract time info
-          this.manifestInfo = dvrInfo.manifestInfo;
+        assert.ok(
+          this._levels,
+          'An array of levels is required to change quality',
+        )
+        const newLevel = this._levels.find(
+          (level) => level.id === evt.newQuality,
+        ) // TODO or simply this._levels[evt.newQuality]?
+        assert.ok(newLevel, 'A valid level is required to change quality')
+        this.onLevelSwitch(newLevel.level)
+      })
+    })
+
+    this._dash.on(
+      DASHJS.MediaPlayer.events.METRIC_ADDED,
+      (e: DashMetricEvent) => {
+        // Listen for the first manifest request in order to update player UI
+        if ((e.metric as string) === 'DVRInfo') {
+          // TODO fix typings
+          assert.ok(
+            this._dash,
+            'An instance of dashjs MediaPlayer is required to get metrics',
+          )
+          const dvrInfo = this._dash.getDashMetrics().getCurrentDVRInfo('video')
+          if (dvrInfo) {
+            // Extract time info
+            this.manifestInfo = dvrInfo.manifestInfo
+          }
         }
-      }
-    });
+      },
+    )
 
     this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_RATE_CHANGED, () => {
-      this.trigger('dash:playback-rate-changed');
-    });
+      this.trigger('dash:playback-rate-changed')
+    })
   }
 
   render() {
-    this._ready();
+    this._ready()
 
-    return super.render();
+    return super.render()
   }
 
   _ready() {
-    this._isReadyState = true;
-    this.trigger(Events.PLAYBACK_READY, this.name);
+    this._isReadyState = true
+    this.trigger(Events.PLAYBACK_READY, this.name)
   }
 
   // TODO
@@ -333,89 +368,100 @@ export default class DashPlayback extends HTML5Video {
   }
 
   _startTimeUpdateTimer() {
-    this._stopTimeUpdateTimer();
+    this._stopTimeUpdateTimer()
     this._timeUpdateTimer = setInterval(() => {
-      this._onDurationChange();
-      this._onTimeUpdate();
-    }, 100);
+      this._onDurationChange()
+      this._onTimeUpdate()
+    }, 100)
   }
 
   _stopTimeUpdateTimer() {
     if (this._timeUpdateTimer) {
-      clearInterval(this._timeUpdateTimer);
+      clearInterval(this._timeUpdateTimer)
     }
   }
 
   getProgramDateTime() {
-    return this._programDateTime;
+    return this._programDateTime
   }
 
   // the duration on the video element itself should not be used
   // as this does not necesarily represent the duration of the stream
   // https://github.com/clappr/clappr/issues/668#issuecomment-157036678
   getDuration(): Duration {
-    assert.ok(this._duration !== null, 'A valid duration is required to get the duration');
-    return this._duration;
+    assert.ok(
+      this._duration !== null,
+      'A valid duration is required to get the duration',
+    )
+    return this._duration
   }
 
   getCurrentTime(): TimeValue {
     // e.g. can be < 0 if user pauses near the start
     // eventually they will then be kicked to the end by hlsjs if they run out of buffer
     // before the official start time
-    return this._dash ? this._dash.time() : 0;
+    return this._dash ? this._dash.time() : 0
   }
 
   // the time that "0" now represents relative to when playback started
   // for a stream with a sliding window this will increase as content is
   // removed from the beginning
   getStartTimeOffset(): TimeValue {
-    return this._startTime;
+    return this._startTime
   }
 
   seekPercentage(percentage: number) {
-    let seekTo = this._duration;
+    let seekTo = this._duration
 
     if (percentage > 0) {
-      assert.ok(this._duration !== null, 'A valid duration is required to seek by percentage');
-      seekTo = this._duration * (percentage / 100);
+      assert.ok(
+        this._duration !== null,
+        'A valid duration is required to seek by percentage',
+      )
+      seekTo = this._duration * (percentage / 100)
     }
 
-    assert.ok(seekTo !== null, 'A valid seek time is required');
-    this.seek(seekTo);
+    assert.ok(seekTo !== null, 'A valid seek time is required')
+    this.seek(seekTo)
   }
 
   seek(time: TimeValue) {
     if (time < 0) {
       // eslint-disable-next-line max-len
-      Log.warn('Attempt to seek to a negative time. Resetting to live point. Use seekToLivePoint() to seek to the live point.');
-      time = this.getDuration();
+      Log.warn(
+        'Attempt to seek to a negative time. Resetting to live point. Use seekToLivePoint() to seek to the live point.',
+      )
+      time = this.getDuration()
     }
-    this.dvrEnabled && this._updateDvr(time < this.getDuration() - 10);
-    assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to seek');
-    this._dash.seek(time);
+    this.dvrEnabled && this._updateDvr(time < this.getDuration() - 10)
+    assert.ok(
+      this._dash,
+      'An instance of dashjs MediaPlayer is required to seek',
+    )
+    this._dash.seek(time)
   }
 
   seekToLivePoint() {
-    this.seek(this.getDuration());
+    this.seek(this.getDuration())
   }
 
   _updateDvr(status: boolean) {
-    this.trigger(Events.PLAYBACK_DVR, status);
-    this.trigger(Events.PLAYBACK_STATS_ADD, { 'dvr': status });
+    this.trigger(Events.PLAYBACK_DVR, status)
+    this.trigger(Events.PLAYBACK_STATS_ADD, { dvr: status })
   }
 
   _updateSettings() {
     if (this._playbackType === Playback.VOD) {
-      this.settings.left =  ['playpause', 'position', 'duration'];
+      this.settings.left = ['playpause', 'position', 'duration']
       // this.settings.left.push('playstop');
     } else if (this.dvrEnabled) {
-      this.settings.left = ['playpause'];
+      this.settings.left = ['playpause']
     } else {
-      this.settings.left = ['playstop'];
+      this.settings.left = ['playstop']
     }
 
-    this.settings.seekEnabled = this.isSeekEnabled();
-    this.trigger(Events.PLAYBACK_SETTINGSUPDATE);
+    this.settings.seekEnabled = this.isSeekEnabled()
+    this.trigger(Events.PLAYBACK_SETTINGSUPDATE)
   }
 
   _onPlaybackError = (event: DashPlaybackErrorEvent) => {
@@ -426,34 +472,37 @@ export default class DashPlayback extends HTML5Video {
     // TODO
     // only report/handle errors if they are fatal
     // hlsjs should automatically handle non fatal errors
-    this._stopTimeUpdateTimer();
+    this._stopTimeUpdateTimer()
     if (event.error === 'capability' && event.event === 'mediasource') {
       // No support for MSE
-      const formattedError = this.createError(event.error);
-
-      this.trigger(Events.PLAYBACK_ERROR, formattedError);
-      Log.error('The media cannot be played because it requires a feature ' +
-        'that your browser does not support.');
-    } else if (event.error === 'manifestError' && (
+      const formattedError = this.createError(event.error)
+
+      this.trigger(Events.PLAYBACK_ERROR, formattedError)
+      Log.error(
+        'The media cannot be played because it requires a feature ' +
+          'that your browser does not support.',
+      )
+    } else if (
+      event.error === 'manifestError' &&
       // Manifest type not supported
-      (event.event.id === 'createParser') ||
-      // Codec(s) not supported
-      (event.event.id === 'codec') ||
-      // No streams available to stream
-      (event.event.id === 'nostreams') ||
-      // Error creating Stream object
-      (event.event.id === 'nostreamscomposed') ||
-      // syntax error parsing the manifest
-      (event.event.id === 'parse') ||
-      // a stream has multiplexed audio+video
-      (event.event.id === 'multiplexedrep')
-    )) {
+      (event.event.id === 'createParser' ||
+        // Codec(s) not supported
+        event.event.id === 'codec' ||
+        // No streams available to stream
+        event.event.id === 'nostreams' ||
+        // Error creating Stream object
+        event.event.id === 'nostreamscomposed' ||
+        // syntax error parsing the manifest
+        event.event.id === 'parse' ||
+        // a stream has multiplexed audio+video
+        event.event.id === 'multiplexedrep')
+    ) {
       // These errors have useful error messages, so we forward it on
-      const formattedError = this.createError(event.error);
+      const formattedError = this.createError(event.error)
 
-      this.trigger(Events.PLAYBACK_ERROR, formattedError);
+      this.trigger(Events.PLAYBACK_ERROR, formattedError)
       if (event.error) {
-        Log.error(event.event.message);
+        Log.error(event.event.message)
       }
     } else if (event.error === 'mediasource') {
       // This error happens when dash.js fails to allocate a SourceBuffer
@@ -462,167 +511,193 @@ export default class DashPlayback extends HTML5Video {
       // (audio/video/text) failed allocation.
       // If it's a `MediaError`, dash.js inspects the error object for
       // additional information to append to the error type.
-      const formattedError = this.createError(event.error);
-
-      this.trigger(Events.PLAYBACK_ERROR, formattedError);
-      Log.error(event.event);
-    } else if (event.error === 'capability' && event.event === 'encryptedmedia') {
+      const formattedError = this.createError(event.error)
+
+      this.trigger(Events.PLAYBACK_ERROR, formattedError)
+      Log.error(event.event)
+    } else if (
+      event.error === 'capability' &&
+      event.event === 'encryptedmedia'
+    ) {
       // Browser doesn't support EME
 
-      const formattedError = this.createError(event.error);
+      const formattedError = this.createError(event.error)
 
-      this.trigger(Events.PLAYBACK_ERROR, formattedError);
-      Log.error('The media cannot be played because it requires encryption ' +
-        'that your browser does not support.');
+      this.trigger(Events.PLAYBACK_ERROR, formattedError)
+      Log.error(
+        'The media cannot be played because it requires encryption ' +
+          'that your browser does not support.',
+      )
     } else if (event.error === 'key_session') {
       // This block handles pretty much all errors thrown by the
       // encryption subsystem
-      const formattedError = this.createError(event.error);
+      const formattedError = this.createError(event.error)
 
-      this.trigger(Events.PLAYBACK_ERROR, formattedError);
-      Log.error(event.event);
+      this.trigger(Events.PLAYBACK_ERROR, formattedError)
+      Log.error(event.event)
     } else if (event.error === 'download') {
-      const formattedError = this.createError(event.error);
-
-      this.trigger(Events.PLAYBACK_ERROR, formattedError);
-      Log.error('The media playback was aborted because too many consecutive ' +
-        'download errors occurred.');
-    // } else if (event.error === 'mssError') {
-    //   const formattedError = this.createError(event.error);
-
-    //   this.trigger(Events.PLAYBACK_ERROR, formattedError);
-    //   if (event.error) {
-    //     Log.error(event.error.message);
-    //   }
+      const formattedError = this.createError(event.error)
+
+      this.trigger(Events.PLAYBACK_ERROR, formattedError)
+      Log.error(
+        'The media playback was aborted because too many consecutive ' +
+          'download errors occurred.',
+      )
+      // } else if (event.error === 'mssError') {
+      //   const formattedError = this.createError(event.error);
+
+      //   this.trigger(Events.PLAYBACK_ERROR, formattedError);
+      //   if (event.error) {
+      //     Log.error(event.error.message);
+      //   }
     } else {
       // ignore the error
-      if (typeof event.error === "object") {
-        const formattedError = this.createError(event.error);
+      if (typeof event.error === 'object') {
+        const formattedError = this.createError(event.error)
 
-        this.trigger(Events.PLAYBACK_ERROR, formattedError);
-        Log.error(event.error.message);
+        this.trigger(Events.PLAYBACK_ERROR, formattedError)
+        Log.error(event.error.message)
       } else {
-        Log.error(event.error);
+        Log.error(event.error)
       }
-      return;
+      return
     }
 
     // only reset the dash player in 10ms async, so that the rest of the
     // calling function finishes
     setTimeout(() => {
-      assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to reset');
-      this._dash.reset();
-    }, 10);
+      assert.ok(
+        this._dash,
+        'An instance of dashjs MediaPlayer is required to reset',
+      )
+      this._dash.reset()
+    }, 10)
   }
 
   _onTimeUpdate() {
     if (this.startChangeQuality) {
-      return;
+      return
     }
     const update = {
       current: this.getCurrentTime(),
       total: this.getDuration(),
-      firstFragDateTime: this.getProgramDateTime()
-    };
-    const isSame = this._lastTimeUpdate && (
+      firstFragDateTime: this.getProgramDateTime(),
+    }
+    const isSame =
+      this._lastTimeUpdate &&
       update.current === this._lastTimeUpdate.current &&
-      update.total === this._lastTimeUpdate.total);
+      update.total === this._lastTimeUpdate.total
 
     if (isSame) {
-      return;
+      return
     }
-    this._lastTimeUpdate = update;
-    this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name);
+    this._lastTimeUpdate = update
+    this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name)
   }
 
   _onDurationChange() {
-    const duration = this.getDuration();
+    const duration = this.getDuration()
 
     if (this._lastDuration === duration) {
-      return;
+      return
     }
 
-    this._lastDuration = duration;
-    super._onDurationChange();
+    this._lastDuration = duration
+    super._onDurationChange()
   }
 
   get dvrEnabled() {
-    assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to get the DVR status');
-    return this._dash?.getDVRWindowSize() >= this._minDvrSize && this.getPlaybackType() === Playback.LIVE;
+    assert.ok(
+      this._dash,
+      'An instance of dashjs MediaPlayer is required to get the DVR status',
+    )
+    return (
+      this._dash?.getDVRWindowSize() >= this._minDvrSize &&
+      this.getPlaybackType() === Playback.LIVE
+    )
   }
 
   _onProgress() {
     if (!this._dash) {
-      return;
+      return
     }
 
-    let buffer = this._dash.getDashMetrics().getCurrentBufferLevel('video');
+    let buffer = this._dash.getDashMetrics().getCurrentBufferLevel('video')
 
     if (!buffer) {
-      buffer = this._dash.getDashMetrics().getCurrentBufferLevel('audio');
+      buffer = this._dash.getDashMetrics().getCurrentBufferLevel('audio')
     }
     const progress = {
       start: this.getCurrentTime(),
       current: this.getCurrentTime() + buffer,
-      total: this.getDuration()
-    };
+      total: this.getDuration(),
+    }
 
-    this.trigger(Events.PLAYBACK_PROGRESS, progress, {});
+    this.trigger(Events.PLAYBACK_PROGRESS, progress, {})
   }
 
   play() {
-    trace(`${T} play`, { dash: !!this._dash });
+    trace(`${T} play`, { dash: !!this._dash })
     if (!this._dash) {
-      this._setup();
+      this._setup()
     }
 
-    super.play();
-    this._startTimeUpdateTimer();
+    super.play()
+    this._startTimeUpdateTimer()
   }
 
   pause() {
     if (!this._dash) {
-      return;
+      return
     }
 
-    super.pause();
+    super.pause()
     if (this.dvrEnabled) {
-      this._updateDvr(true);
+      this._updateDvr(true)
     }
   }
 
   stop() {
     if (this._dash) {
-      this._stopTimeUpdateTimer();
-      this._dash.reset();
-      super.stop();
-      this._dash = null;
+      this._stopTimeUpdateTimer()
+      this._dash.reset()
+      super.stop()
+      this._dash = null
     }
   }
 
   destroy() {
-    this._stopTimeUpdateTimer();
+    this._stopTimeUpdateTimer()
     if (this._dash) {
-      this._dash.off(DASHJS.MediaPlayer.events.ERROR, this._onDASHJSSError);
-      this._dash.off(DASHJS.MediaPlayer.events.PLAYBACK_ERROR, this._onPlaybackError);
-      this._dash.off(DASHJS.MediaPlayer.events.MANIFEST_LOADED, this.getDuration);
-      this._dash.reset();
+      this._dash.off(DASHJS.MediaPlayer.events.ERROR, this._onDASHJSSError)
+      this._dash.off(
+        DASHJS.MediaPlayer.events.PLAYBACK_ERROR,
+        this._onPlaybackError,
+      )
+      this._dash.off(
+        DASHJS.MediaPlayer.events.MANIFEST_LOADED,
+        this.getDuration,
+      )
+      this._dash.reset()
     }
-    this._dash = null;
-    return super.destroy();
+    this._dash = null
+    return super.destroy()
   }
 
   _updatePlaybackType() {
-    assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to update the playback type');
-    this._playbackType = this._dash.isDynamic() ? Playback.LIVE : Playback.VOD;
+    assert.ok(
+      this._dash,
+      'An instance of dashjs MediaPlayer is required to update the playback type',
+    )
+    this._playbackType = this._dash.isDynamic() ? Playback.LIVE : Playback.VOD
   }
 
   _fillLevels(levels: BitrateInfo[]) {
     // TOOD check that levels[i].qualityIndex === i
     this._levels = levels.map((level) => {
-      return { id: level.qualityIndex, level: level };
-    });
-    this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this._levels);
+      return { id: level.qualityIndex, level: level }
+    })
+    this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this._levels)
   }
 
   // _onLevelUpdated(_: any, data) {
@@ -771,26 +846,41 @@ export default class DashPlayback extends HTML5Video {
       height: currentLevel.height,
       width: currentLevel.width,
       bitrate: currentLevel.bitrate,
-      level: currentLevel.qualityIndex
-    });
+      level: currentLevel.qualityIndex,
+    })
   }
 
   getPlaybackType() {
-    return this._playbackType;
+    return this._playbackType
   }
 
   isSeekEnabled() {
-    return (this._playbackType === Playback.VOD || this.dvrEnabled);
+    return this._playbackType === Playback.VOD || this.dvrEnabled
   }
 }
 
 DashPlayback.canPlay = function (resource, mimeType) {
-  const resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || [];
-  const isDash = ((resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'mpd') ||
-    mimeType === 'application/dash+xml' || mimeType === 'video/mp4');
+  const resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || []
+  const isDash =
+    (resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'mpd') ||
+    mimeType === 'application/dash+xml' ||
+    mimeType === 'video/mp4'
   // TODO check
-  const ctor = window.MediaSource || ('WebKitMediaSource' in window ? window.WebKitMediaSource : undefined);
-  const hasSupport = typeof ctor === 'function';
-  trace(`${T} canPlay`, {hasSupport, isDash, resource});
-  return !!(hasSupport && isDash);
-};
+  const ms = window.MediaSource
+  const mms =
+    'ManagedMediaSource' in window ? window.ManagedMediaSource : undefined
+  const wms =
+    'WebKitMediaSource' in window ? window.WebKitMediaSource : undefined
+  const ctor = ms || mms || wms
+
+  const hasSupport = typeof ctor === 'function'
+  trace(`${T} canPlay`, {
+    hasSupport,
+    isDash,
+    resource,
+    ms: typeof ms === 'function',
+    mms: typeof mms === 'function',
+    wms: typeof wms === 'function',
+  })
+  return !!(hasSupport && isDash)
+}