@clappr/hlsjs-playback 1.9.11 → 1.9.13

package/dist/hlsjs-playback.js

@@ -4,149 +4,6 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.HlsjsPlayback = factory(global.Clappr));
 })(this, (function (core) { 'use strict';
 
-  function _arrayLikeToArray(r, a) {
-    (null == a || a > r.length) && (a = r.length);
-    for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-    return n;
-  }
-  function _arrayWithoutHoles(r) {
-    if (Array.isArray(r)) return _arrayLikeToArray(r);
-  }
-  function _assertThisInitialized(e) {
-    if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    return e;
-  }
-  function _callSuper(t, o, e) {
-    return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-  }
-  function _classCallCheck(a, n) {
-    if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
-  }
-  function _defineProperties(e, r) {
-    for (var t = 0; t < r.length; t++) {
-      var o = r[t];
-      o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey$1(o.key), o);
-    }
-  }
-  function _createClass(e, r, t) {
-    return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
-      writable: !1
-    }), e;
-  }
-  function _defineProperty$1(e, r, t) {
-    return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, {
-      value: t,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
-    }) : e[r] = t, e;
-  }
-  function _get() {
-    return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) {
-      var p = _superPropBase(e, t);
-      if (p) {
-        var n = Object.getOwnPropertyDescriptor(p, t);
-        return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value;
-      }
-    }, _get.apply(null, arguments);
-  }
-  function _getPrototypeOf(t) {
-    return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
-      return t.__proto__ || Object.getPrototypeOf(t);
-    }, _getPrototypeOf(t);
-  }
-  function _inherits(t, e) {
-    if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
-    t.prototype = Object.create(e && e.prototype, {
-      constructor: {
-        value: t,
-        writable: !0,
-        configurable: !0
-      }
-    }), Object.defineProperty(t, "prototype", {
-      writable: !1
-    }), e && _setPrototypeOf(t, e);
-  }
-  function _isNativeReflectConstruct() {
-    try {
-      var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    } catch (t) {}
-    return (_isNativeReflectConstruct = function () {
-      return !!t;
-    })();
-  }
-  function _iterableToArray(r) {
-    if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
-  }
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-  function ownKeys$1(e, r) {
-    var t = Object.keys(e);
-    if (Object.getOwnPropertySymbols) {
-      var o = Object.getOwnPropertySymbols(e);
-      r && (o = o.filter(function (r) {
-        return Object.getOwnPropertyDescriptor(e, r).enumerable;
-      })), t.push.apply(t, o);
-    }
-    return t;
-  }
-  function _objectSpread2$1(e) {
-    for (var r = 1; r < arguments.length; r++) {
-      var t = null != arguments[r] ? arguments[r] : {};
-      r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) {
-        _defineProperty$1(e, r, t[r]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) {
-        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-      });
-    }
-    return e;
-  }
-  function _possibleConstructorReturn(t, e) {
-    if (e && ("object" == typeof e || "function" == typeof e)) return e;
-    if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
-    return _assertThisInitialized(t);
-  }
-  function _setPrototypeOf(t, e) {
-    return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
-      return t.__proto__ = e, t;
-    }, _setPrototypeOf(t, e);
-  }
-  function _superPropBase(t, o) {
-    for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t)););
-    return t;
-  }
-  function _superPropGet(t, o, e, r) {
-    var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e);
-    return 2 & r && "function" == typeof p ? function (t) {
-      return p.apply(e, t);
-    } : p;
-  }
-  function _toConsumableArray(r) {
-    return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
-  }
-  function _toPrimitive$1(t, r) {
-    if ("object" != typeof t || !t) return t;
-    var e = t[Symbol.toPrimitive];
-    if (void 0 !== e) {
-      var i = e.call(t, r || "default");
-      if ("object" != typeof i) return i;
-      throw new TypeError("@@toPrimitive must return a primitive value.");
-    }
-    return ("string" === r ? String : Number)(t);
-  }
-  function _toPropertyKey$1(t) {
-    var i = _toPrimitive$1(t, "string");
-    return "symbol" == typeof i ? i : i + "";
-  }
-  function _unsupportedIterableToArray(r, a) {
-    if (r) {
-      if ("string" == typeof r) return _arrayLikeToArray(r, a);
-      var t = {}.toString.call(r).slice(8, -1);
-      return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
-    }
-  }
-
   // https://caniuse.com/mdn-javascript_builtins_number_isfinite
   const isFiniteNumber = Number.isFinite || function (value) {
     return typeof value === 'number' && isFinite(value);
@@ -36848,878 +36705,726 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
   }
   Hls.defaultConfig = void 0;
 
-  var now = core.Utils.now,
-    listContainsIgnoreCase = core.Utils.listContainsIgnoreCase;
-  var AUTO = -1;
-  var DEFAULT_RECOVER_ATTEMPTS = 16;
+  // Copyright 2014 Globo.com Player authors. All rights reserved.
+  // Use of this source code is governed by a BSD-style
+  // license that can be found in the LICENSE file.
+
+  const {
+    now,
+    listContainsIgnoreCase
+  } = core.Utils;
+  const AUTO = -1;
+  const DEFAULT_RECOVER_ATTEMPTS = 16;
   core.Events.register('PLAYBACK_FRAGMENT_CHANGED');
   core.Events.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-  var HlsjsPlayback = /*#__PURE__*/function (_HTML5Video) {
-    function HlsjsPlayback() {
-      var _this;
-      _classCallCheck(this, HlsjsPlayback);
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      _this = _callSuper(this, HlsjsPlayback, [].concat(args));
-      _this.options.hlsPlayback = _objectSpread2$1(_objectSpread2$1({}, _this.defaultOptions), _this.options.hlsPlayback);
-      _this._timeUpdateThrottleDelay = 200;
-      _this._timeUpdateFiringRate = 0.2;
-      _this._durationChangeMinOffset = 0.5;
-      _this._setInitialState();
-      return _this;
-    }
-    _inherits(HlsjsPlayback, _HTML5Video);
-    return _createClass(HlsjsPlayback, [{
-      key: "name",
-      get: function get() {
-        return 'hls';
-      }
-    }, {
-      key: "supportedVersion",
-      get: function get() {
-        return {
-          min: "0.14.6"
-        };
-      }
-    }, {
-      key: "levels",
-      get: function get() {
-        return this._levels || [];
-      }
-    }, {
-      key: "currentLevel",
-      get: function get() {
-        if (this._currentLevel === null || this._currentLevel === undefined) {
-          return AUTO;
-        } else {
-          return this._currentLevel;
-        } // 0 is a valid level ID
-      },
-      set: function set(id) {
-        this._currentLevel = id;
-        this.trigger(core.Events.PLAYBACK_LEVEL_SWITCH_START);
-        if (this.options.playback.hlsUseNextLevel) {
-          this._hls.nextLevel = this._currentLevel;
-        } else {
-          this._hls.currentLevel = this._currentLevel;
-        }
-      }
-    }, {
-      key: "isReady",
-      get: function get() {
-        return this._isReadyState;
-      }
-    }, {
-      key: "latency",
-      get: function get() {
-        return this._hls.latency;
-      }
-    }, {
-      key: "liveSyncPosition",
-      get: function get() {
-        return this._hls.liveSyncPosition;
-      }
-    }, {
-      key: "currentProgramDateTime",
-      get: function get() {
-        return this._hls.playingDate;
-      }
-    }, {
-      key: "_startTime",
-      get: function get() {
-        if (this._playbackType === core.Playback.LIVE && this._playlistType !== 'EVENT') {
-          return this._extrapolatedStartTime;
-        }
-        return this._playableRegionStartTime;
-      }
-    }, {
-      key: "_now",
-      get: function get() {
-        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)
-    }, {
-      key: "_extrapolatedStartTime",
-      get: function get() {
-        if (!this._localStartTimeCorrelation) {
-          return this._playableRegionStartTime;
-        }
-        var corr = this._localStartTimeCorrelation;
-        var timePassed = this._now - corr.local;
-        var extrapolatedWindowStartTime = (corr.remote + timePassed) / 1000;
-        // cap at the end of the extrapolated window duration
-        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)
-    }, {
-      key: "_extrapolatedEndTime",
-      get: function get() {
-        var actualEndTime = this._playableRegionStartTime + this._playableRegionDuration;
-        if (!this._localEndTimeCorrelation) return actualEndTime;
-        var correlation = this._localEndTimeCorrelation;
-        var timePassed = this._now - correlation.local;
-        var extrapolatedEndTime = (correlation.remote + timePassed) / 1000;
-        return Math.max(actualEndTime - this._extrapolatedWindowDuration, Math.min(extrapolatedEndTime, actualEndTime));
+  class HlsjsPlayback extends core.HTML5Video {
+    get name() {
+      return 'hls';
+    }
+    get supportedVersion() {
+      return {
+        min: "0.14.8"
+      };
+    }
+    get levels() {
+      return this._levels || [];
+    }
+    get currentLevel() {
+      if (this._currentLevel === null || this._currentLevel === undefined) {
+        return AUTO;
+      } else {
+        return this._currentLevel;
+      } // 0 is a valid level ID
+    }
+    get isReady() {
+      return this._isReadyState;
+    }
+    set currentLevel(id) {
+      this._currentLevel = id;
+      this.trigger(core.Events.PLAYBACK_LEVEL_SWITCH_START);
+      if (this.options.playback.hlsUseNextLevel) {
+        this._hls.nextLevel = this._currentLevel;
+      } else {
+        this._hls.currentLevel = this._currentLevel;
       }
-    }, {
-      key: "_duration",
-      get: function get() {
-        return this._extrapolatedEndTime - this._startTime;
+    }
+    get latency() {
+      return this._hls.latency;
+    }
+    get liveSyncPosition() {
+      return this._hls.liveSyncPosition;
+    }
+    get currentProgramDateTime() {
+      return this._hls.playingDate;
+    }
+    get _startTime() {
+      if (this._playbackType === core.Playback.LIVE && this._playlistType !== 'EVENT') {
+        return this._extrapolatedStartTime;
       }
+      return this._playableRegionStartTime;
+    }
+    get _now() {
+      return now();
+    }
 
-      // Returns the duration (seconds) of the window that the extrapolated start time is allowed
-      // to move in before being capped.
-      // The extrapolated start time should never reach the cap at the end of the window as the
-      // window should slide as chunks are removed from the start.
-      // This also applies to the extrapolated end time in the same way.
-      //
-      // If chunks aren't being removed for some reason that the start time will reach and remain fixed at
-      // playableRegionStartTime + extrapolatedWindowDuration
-      //
-      //                                <-- window duration -->
-      // I.e   playableRegionStartTime |-----------------------|
-      //                               | -->   .       .       .
-      //                               .   --> | -->   .       .
-      //                               .       .   --> | -->   .
-      //                               .       .       .   --> |
-      //                               .       .       .       .
-      //                                 extrapolatedStartTime
-    }, {
-      key: "_extrapolatedWindowDuration",
-      get: function get() {
-        if (this._segmentTargetDuration === null) {
-          return 0;
-        }
-        return this._extrapolatedWindowNumSegments * this._segmentTargetDuration;
-      }
-    }, {
-      key: "bandwidthEstimate",
-      get: function get() {
-        return this._hls && this._hls.bandwidthEstimate;
-      }
-    }, {
-      key: "defaultOptions",
-      get: function get() {
-        return {
-          preload: true
-        };
-      }
-    }, {
-      key: "customListeners",
-      get: function get() {
-        return this.options.hlsPlayback && this.options.hlsPlayback.customListeners || [];
-      }
-    }, {
-      key: "sourceMedia",
-      get: function get() {
-        return this.options.src;
-      }
-    }, {
-      key: "currentTimestamp",
-      get: function get() {
-        if (!this._currentFragment) return null;
-        var startTime = this._currentFragment.programDateTime;
-        var playbackTime = this.el.currentTime;
-        var playTimeOffSet = playbackTime - this._currentFragment.start;
-        var currentTimestampInMs = startTime + playTimeOffSet * 1000;
-        return currentTimestampInMs / 1000;
-      }
-    }, {
-      key: "_setInitialState",
-      value: function _setInitialState() {
-        this._minDvrSize = typeof this.options.hlsMinimumDvrSize === 'undefined' ? 60 : this.options.hlsMinimumDvrSize;
-        // 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 || typeof this.options.playback.extrapolatedWindowNumSegments === 'undefined' ? 2 : this.options.playback.extrapolatedWindowNumSegments;
-        this._playbackType = core.Playback.VOD;
-        this._lastTimeUpdate = {
-          current: 0,
-          total: 0,
-          firstFragDateTime: 0
-        };
-        this._lastTimeUpdateFiredTime = 0;
-        this._lastDuration = null;
-        // for hls streams which have dvr with a sliding window,
-        // the content at the start of the playlist is removed as new
-        // content is appended at the end.
-        // this means the actual playable start time will increase as the
-        // start content is deleted
-        // For streams with dvr where the entire recording is kept from the
-        // beginning this should stay as 0
-        this._playableRegionStartTime = 0;
-        // {local, remote} remote is the time in the video element that should represent 0
-        //                 local is the system time when the 'remote' measurment took place
-        this._localStartTimeCorrelation = null;
-        // {local, remote} remote is the time in the video element that should represents the end
-        //                 local is the system time when the 'remote' measurment took place
-        this._localEndTimeCorrelation = null;
-        // if content is removed from the beginning then this empty area should
-        // be ignored. "playableRegionDuration" excludes the empty area
-        this._playableRegionDuration = 0;
-        // #EXT-X-PROGRAM-DATE-TIME
-        this._programDateTime = 0;
-        // true when the actual duration is longer than hlsjs's live sync point
-        // when this is false playableRegionDuration will be the actual duration
-        // when this is true playableRegionDuration will exclude the time after the sync point
-        this._durationExcludesAfterLiveSyncPoint = false;
-        // #EXT-X-TARGETDURATION
-        this._segmentTargetDuration = null;
-        // #EXT-X-PLAYLIST-TYPE
-        this._playlistType = null;
-        this._recoverAttemptsRemaining = this.options.hlsRecoverAttempts || DEFAULT_RECOVER_ATTEMPTS;
-      }
-    }, {
-      key: "_setup",
-      value: function _setup() {
-        this._destroyHLSInstance();
-        this._createHLSInstance();
-        this._listenHLSEvents();
-        this._attachHLSMedia();
-      }
-    }, {
-      key: "_destroyHLSInstance",
-      value: function _destroyHLSInstance() {
-        if (!this._hls) return;
-        this._manifestLoading = false;
-        this._ccIsSetup = false;
-        this._ccTracksUpdated = false;
-        this._setInitialState();
-        this._hls.destroy();
-        this._hls = null;
-      }
-    }, {
-      key: "_createHLSInstance",
-      value: function _createHLSInstance() {
-        var config = _objectSpread2$1({}, this.options.playback.hlsjsConfig);
-        this._hls = new Hls(config);
-      }
-    }, {
-      key: "_attachHLSMedia",
-      value: function _attachHLSMedia() {
-        if (!this._hls) return;
-        this._hls.attachMedia(this.el);
-      }
-    }, {
-      key: "_listenHLSEvents",
-      value: function _listenHLSEvents() {
-        var _this2 = this;
-        if (!this._hls) return;
-        this._hls.once(Hls.Events.MEDIA_ATTACHED, function () {
-          _this2.options.hlsPlayback.preload && _this2._hls.loadSource(_this2.options.src);
-        });
-        this._hls.on(Hls.Events.MANIFEST_LOADING, function () {
-          _this2._manifestLoading = true;
-        });
-        this._hls.on(Hls.Events.LEVEL_LOADED, function (evt, data) {
-          return _this2._updatePlaybackType(evt, data);
-        });
-        this._hls.on(Hls.Events.LEVEL_UPDATED, function (evt, data) {
-          return _this2._onLevelUpdated(evt, data);
-        });
-        this._hls.on(Hls.Events.LEVEL_SWITCHED, function (evt, data) {
-          return _this2._onLevelSwitch(evt, data);
-        });
-        this._hls.on(Hls.Events.FRAG_CHANGED, function (evt, data) {
-          return _this2._onFragmentChanged(evt, data);
-        });
-        this._hls.on(Hls.Events.FRAG_LOADED, function (evt, data) {
-          return _this2._onFragmentLoaded(evt, data);
-        });
-        this._hls.on(Hls.Events.FRAG_BUFFERED, function (evt, data) {
-          return _this2._onFragmentBuffered(evt, data);
-        });
-        this._hls.on(Hls.Events.FRAG_PARSING_METADATA, function (evt, data) {
-          return _this2._onFragmentParsingMetadata(evt, data);
-        });
-        this._hls.on(Hls.Events.ERROR, function (evt, data) {
-          return _this2._onHLSJSError(evt, data);
-        });
-        this._hls.on(Hls.Events.SUBTITLE_TRACK_LOADED, function (evt, data) {
-          return _this2._onSubtitleLoaded(evt, data);
-        });
-        this._hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, function () {
-          return _this2._ccTracksUpdated = true;
-        });
-        this.bindCustomListeners();
-      }
-    }, {
-      key: "bindCustomListeners",
-      value: function bindCustomListeners() {
-        var _this3 = this;
-        this.customListeners.forEach(function (item) {
-          var requestedEventName = item.eventName;
-          var typeOfListener = item.once ? 'once' : 'on';
-          requestedEventName && _this3._hls["".concat(typeOfListener)](requestedEventName, item.callback);
-        });
+    // 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;
       }
-    }, {
-      key: "unbindCustomListeners",
-      value: function unbindCustomListeners() {
-        var _this4 = this;
-        this.customListeners.forEach(function (item) {
-          var requestedEventName = item.eventName;
-          requestedEventName && _this4._hls.off(requestedEventName, item.callback);
-        });
+      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);
+    }
+
+    // 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;
+      if (!this._localEndTimeCorrelation) return actualEndTime;
+      const correlation = this._localEndTimeCorrelation;
+      const timePassed = this._now - correlation.local;
+      const extrapolatedEndTime = (correlation.remote + timePassed) / 1000;
+      return Math.max(actualEndTime - this._extrapolatedWindowDuration, Math.min(extrapolatedEndTime, actualEndTime));
+    }
+    get _duration() {
+      return this._extrapolatedEndTime - this._startTime;
+    }
+
+    // Returns the duration (seconds) of the window that the extrapolated start time is allowed
+    // to move in before being capped.
+    // The extrapolated start time should never reach the cap at the end of the window as the
+    // window should slide as chunks are removed from the start.
+    // This also applies to the extrapolated end time in the same way.
+    //
+    // If chunks aren't being removed for some reason that the start time will reach and remain fixed at
+    // playableRegionStartTime + extrapolatedWindowDuration
+    //
+    //                                <-- window duration -->
+    // I.e   playableRegionStartTime |-----------------------|
+    //                               | -->   .       .       .
+    //                               .   --> | -->   .       .
+    //                               .       .   --> | -->   .
+    //                               .       .       .   --> |
+    //                               .       .       .       .
+    //                                 extrapolatedStartTime
+    get _extrapolatedWindowDuration() {
+      if (this._segmentTargetDuration === null) {
+        return 0;
       }
-    }, {
-      key: "_onFragmentParsingMetadata",
-      value: function _onFragmentParsingMetadata(evt, data) {
-        this.trigger(core.Events.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA, {
-          evt: evt,
-          data: data
+      return this._extrapolatedWindowNumSegments * this._segmentTargetDuration;
+    }
+    get bandwidthEstimate() {
+      return this._hls && this._hls.bandwidthEstimate;
+    }
+    get defaultOptions() {
+      return {
+        preload: true
+      };
+    }
+    get customListeners() {
+      return this.options.hlsPlayback && this.options.hlsPlayback.customListeners || [];
+    }
+    get sourceMedia() {
+      return this.options.src;
+    }
+    get currentTimestamp() {
+      if (!this._currentFragment) return null;
+      const startTime = this._currentFragment.programDateTime;
+      const playbackTime = this.el.currentTime;
+      const playTimeOffSet = playbackTime - this._currentFragment.start;
+      const currentTimestampInMs = startTime + playTimeOffSet * 1000;
+      return currentTimestampInMs / 1000;
+    }
+    static get HLSJS() {
+      return Hls;
+    }
+    constructor(...args) {
+      super(...args);
+      this.options.hlsPlayback = {
+        ...this.defaultOptions,
+        ...this.options.hlsPlayback
+      };
+      this._timeUpdateThrottleDelay = 200;
+      this._timeUpdateFiringRate = 0.2;
+      this._durationChangeMinOffset = 0.5;
+      this._setInitialState();
+    }
+    _setInitialState() {
+      this._minDvrSize = typeof this.options.hlsMinimumDvrSize === 'undefined' ? 60 : this.options.hlsMinimumDvrSize;
+      // 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 || typeof this.options.playback.extrapolatedWindowNumSegments === 'undefined' ? 2 : this.options.playback.extrapolatedWindowNumSegments;
+      this._playbackType = core.Playback.VOD;
+      this._lastTimeUpdate = {
+        current: 0,
+        total: 0,
+        firstFragDateTime: 0
+      };
+      this._lastTimeUpdateFiredTime = 0;
+      this._lastDuration = null;
+      // for hls streams which have dvr with a sliding window,
+      // the content at the start of the playlist is removed as new
+      // content is appended at the end.
+      // this means the actual playable start time will increase as the
+      // start content is deleted
+      // For streams with dvr where the entire recording is kept from the
+      // beginning this should stay as 0
+      this._playableRegionStartTime = 0;
+      // {local, remote} remote is the time in the video element that should represent 0
+      //                 local is the system time when the 'remote' measurment took place
+      this._localStartTimeCorrelation = null;
+      // {local, remote} remote is the time in the video element that should represents the end
+      //                 local is the system time when the 'remote' measurment took place
+      this._localEndTimeCorrelation = null;
+      // if content is removed from the beginning then this empty area should
+      // be ignored. "playableRegionDuration" excludes the empty area
+      this._playableRegionDuration = 0;
+      // #EXT-X-PROGRAM-DATE-TIME
+      this._programDateTime = 0;
+      // true when the actual duration is longer than hlsjs's live sync point
+      // when this is false playableRegionDuration will be the actual duration
+      // when this is true playableRegionDuration will exclude the time after the sync point
+      this._durationExcludesAfterLiveSyncPoint = false;
+      // #EXT-X-TARGETDURATION
+      this._segmentTargetDuration = null;
+      // #EXT-X-PLAYLIST-TYPE
+      this._playlistType = null;
+      this._recoverAttemptsRemaining = this.options.hlsRecoverAttempts || DEFAULT_RECOVER_ATTEMPTS;
+    }
+    _setup() {
+      this._destroyHLSInstance();
+      this._createHLSInstance();
+      this._listenHLSEvents();
+      this._attachHLSMedia();
+    }
+    _destroyHLSInstance() {
+      if (!this._hls) return;
+      this._manifestLoading = false;
+      this._ccIsSetup = false;
+      this._ccTracksUpdated = false;
+      this._setInitialState();
+      this._hls.destroy();
+      this._hls = null;
+    }
+    _createHLSInstance() {
+      const config = {
+        ...this.options.playback.hlsjsConfig
+      };
+      this._hls = new Hls(config);
+    }
+    _attachHLSMedia() {
+      if (!this._hls) return;
+      this._hls.attachMedia(this.el);
+    }
+    _listenHLSEvents() {
+      if (!this._hls) return;
+      this._hls.once(Hls.Events.MEDIA_ATTACHED, () => {
+        this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
+      });
+      this._hls.on(Hls.Events.MANIFEST_LOADING, () => {
+        this._manifestLoading = true;
+      });
+      this._hls.on(Hls.Events.LEVEL_LOADED, (evt, data) => this._updatePlaybackType(evt, data));
+      this._hls.on(Hls.Events.LEVEL_UPDATED, (evt, data) => this._onLevelUpdated(evt, data));
+      this._hls.on(Hls.Events.LEVEL_SWITCHED, (evt, data) => this._onLevelSwitch(evt, data));
+      this._hls.on(Hls.Events.FRAG_CHANGED, (evt, data) => this._onFragmentChanged(evt, data));
+      this._hls.on(Hls.Events.FRAG_LOADED, (evt, data) => this._onFragmentLoaded(evt, data));
+      this._hls.on(Hls.Events.FRAG_BUFFERED, (evt, data) => this._onFragmentBuffered(evt, data));
+      this._hls.on(Hls.Events.FRAG_PARSING_METADATA, (evt, data) => this._onFragmentParsingMetadata(evt, data));
+      this._hls.on(Hls.Events.ERROR, (evt, data) => this._onHLSJSError(evt, data));
+      this._hls.on(Hls.Events.SUBTITLE_TRACK_LOADED, (evt, data) => this._onSubtitleLoaded(evt, data));
+      this._hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, () => this._ccTracksUpdated = true);
+      this.bindCustomListeners();
+    }
+    bindCustomListeners() {
+      this.customListeners.forEach(item => {
+        const requestedEventName = item.eventName;
+        const typeOfListener = item.once ? 'once' : 'on';
+        requestedEventName && this._hls[`${typeOfListener}`](requestedEventName, item.callback);
+      });
+    }
+    unbindCustomListeners() {
+      this.customListeners.forEach(item => {
+        const requestedEventName = item.eventName;
+        requestedEventName && this._hls.off(requestedEventName, item.callback);
+      });
+    }
+    _onFragmentParsingMetadata(evt, data) {
+      this.trigger(core.Events.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA, {
+        evt,
+        data
+      });
+    }
+    render() {
+      this._ready();
+      return super.render();
+    }
+    _ready() {
+      if (this._isReadyState) return;
+      !this._hls && this._setup();
+      this._isReadyState = true;
+      this.trigger(core.Events.PLAYBACK_READY, this.name);
+    }
+    _recover(evt, data, error) {
+      if (!this._recoveredDecodingError) {
+        this._recoveredDecodingError = true;
+        this._hls.recoverMediaError();
+        this.play();
+      } else if (!this._recoveredAudioCodecError) {
+        this._recoveredAudioCodecError = true;
+        this._hls.swapAudioCodec();
+        this._hls.recoverMediaError();
+        this.play();
+      } else {
+        core.Log.error('hlsjs: failed to recover', {
+          evt,
+          data
         });
+        error.level = core.PlayerError.Levels.FATAL;
+        const formattedError = this.createError(error);
+        this.trigger(core.Events.PLAYBACK_ERROR, formattedError);
+        this.stop();
       }
-    }, {
-      key: "render",
-      value: function render() {
-        this._ready();
-        return _superPropGet(HlsjsPlayback, "render", this, 3)([]);
-      }
-    }, {
-      key: "_ready",
-      value: function _ready() {
-        if (this._isReadyState) return;
-        !this._hls && this._setup();
-        this._isReadyState = true;
-        this.trigger(core.Events.PLAYBACK_READY, this.name);
-      }
-    }, {
-      key: "_recover",
-      value: function _recover(evt, data, error) {
-        if (!this._recoveredDecodingError) {
-          this._recoveredDecodingError = true;
-          this._hls.recoverMediaError();
-          this.play();
-        } else if (!this._recoveredAudioCodecError) {
-          this._recoveredAudioCodecError = true;
-          this._hls.swapAudioCodec();
-          this._hls.recoverMediaError();
-          this.play();
-        } else {
-          core.Log.error('hlsjs: failed to recover', {
-            evt: evt,
-            data: data
-          });
-          error.level = core.PlayerError.Levels.FATAL;
-          var formattedError = this.createError(error);
-          this.trigger(core.Events.PLAYBACK_ERROR, formattedError);
-          this.stop();
-        }
-      }
+    }
 
-      // override
-      // this playback manages the src on the video element itself
-    }, {
-      key: "_setupSrc",
-      value: function _setupSrc(srcUrl) {} // eslint-disable-line no-unused-vars
-    }, {
-      key: "_startTimeUpdateTimer",
-      value: function _startTimeUpdateTimer() {
-        var _this5 = this;
-        if (this._timeUpdateTimer) return;
-        this._timeUpdateTimer = setInterval(function () {
-          _this5._onDurationChange();
-          _this5._onTimeUpdate();
-        }, 100);
-      }
-    }, {
-      key: "_stopTimeUpdateTimer",
-      value: function _stopTimeUpdateTimer() {
-        if (!this._timeUpdateTimer) return;
-        clearInterval(this._timeUpdateTimer);
-        this._timeUpdateTimer = null;
-      }
-    }, {
-      key: "getProgramDateTime",
-      value: function getProgramDateTime() {
-        return this._programDateTime;
-      }
+    // override
+    // this playback manages the src on the video element itself
+    _setupSrc(srcUrl) {} // eslint-disable-line no-unused-vars
 
-      // 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
-    }, {
-      key: "getDuration",
-      value: function getDuration() {
-        return this._duration;
-      }
+    _startTimeUpdateTimer() {
+      if (this._timeUpdateTimer) return;
+      this._timeUpdateTimer = setInterval(() => {
+        this._onDurationChange();
+        this._onTimeUpdate();
+      }, 100);
+    }
+    _stopTimeUpdateTimer() {
+      if (!this._timeUpdateTimer) return;
+      clearInterval(this._timeUpdateTimer);
+      this._timeUpdateTimer = null;
+    }
+    getProgramDateTime() {
+      return this._programDateTime;
+    }
 
-      // the frame rate should be retrieved from the HLS.js level information
-      // as it is not necessarily exposed directly by the video element
-    }, {
-      key: "getFrameRate",
-      value: function getFrameRate() {
-        if (this._hls && this._hls.levels && this._hls.currentLevel >= 0) {
-          var level = this._hls.levels[this._hls.currentLevel];
-          return level && level.frameRate ? level.frameRate : null;
-        }
-        return null;
-      }
-    }, {
-      key: "getCurrentTime",
-      value: function getCurrentTime() {
-        // 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 Math.max(0, this.el.currentTime - this._startTime);
-      }
+    // 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() {
+      return this._duration;
+    }
 
-      // 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
-    }, {
-      key: "getStartTimeOffset",
-      value: function getStartTimeOffset() {
-        return this._startTime;
-      }
-    }, {
-      key: "seekPercentage",
-      value: function seekPercentage(percentage) {
-        var seekTo = percentage > 0 ? this._duration * (percentage / 100) : this._duration;
-        this.seek(seekTo);
+    // the frame rate should be retrieved from the HLS.js level information
+    // as it is not necessarily exposed directly by the video element
+    getFrameRate() {
+      if (this._hls && this._hls.levels && this._hls.currentLevel >= 0) {
+        const level = this._hls.levels[this._hls.currentLevel];
+        return level && level.frameRate ? level.frameRate : null;
       }
-    }, {
-      key: "seek",
-      value: function seek(time) {
-        if (time < 0) {
-          core.Log.warn('Attempt to seek to a negative time. Resetting to live point. Use seekToLivePoint() to seek to the live point.');
-          time = this.getDuration();
-        }
-        time += this._startTime;
-        this.el.currentTime = time;
-      }
-    }, {
-      key: "seekToLivePoint",
-      value: function seekToLivePoint() {
-        this.seek(this.getDuration());
+      return null;
+    }
+    getCurrentTime() {
+      // 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 Math.max(0, this.el.currentTime - this._startTime);
+    }
+
+    // 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() {
+      return this._startTime;
+    }
+    seekPercentage(percentage) {
+      const seekTo = percentage > 0 ? this._duration * (percentage / 100) : this._duration;
+      this.seek(seekTo);
+    }
+    seek(time) {
+      if (time < 0) {
+        core.Log.warn('Attempt to seek to a negative time. Resetting to live point. Use seekToLivePoint() to seek to the live point.');
+        time = this.getDuration();
       }
-    }, {
-      key: "_updateSettings",
-      value: function _updateSettings() {
-        if (this._playbackType === core.Playback.VOD) {
-          this.settings.left = ['playpause', 'position', 'duration'];
-        } else if (this.dvrEnabled) {
-          this.settings.left = ['playpause'];
-        } else {
-          this.settings.left = ['playstop'];
-        }
-        this.settings.seekEnabled = this.isSeekEnabled();
-        this.trigger(core.Events.PLAYBACK_SETTINGSUPDATE);
+      time += this._startTime;
+      this.el.currentTime = time;
+    }
+    seekToLivePoint() {
+      this.seek(this.getDuration());
+    }
+    _updateSettings() {
+      if (this._playbackType === core.Playback.VOD) {
+        this.settings.left = ['playpause', 'position', 'duration'];
+      } else if (this.dvrEnabled) {
+        this.settings.left = ['playpause'];
+      } else {
+        this.settings.left = ['playstop'];
       }
-    }, {
-      key: "_onHLSJSError",
-      value: function _onHLSJSError(evt, data) {
-        var error = {
-          code: "".concat(data.type, "_").concat(data.details),
-          description: "".concat(this.name, " error: type: ").concat(data.type, ", details: ").concat(data.details),
-          raw: data
-        };
-        var formattedError;
-        if (data.response) error.description += ", response: ".concat(JSON.stringify(data.response));
-        // only report/handle errors if they are fatal
-        // hlsjs should automatically handle non fatal errors
-        if (data.fatal) {
-          if (this._recoverAttemptsRemaining > 0) {
-            this._recoverAttemptsRemaining -= 1;
-            switch (data.type) {
-              case Hls.ErrorTypes.NETWORK_ERROR:
-                switch (data.details) {
-                  // The following network errors cannot be recovered with HLS.startLoad()
-                  // For more details, see https://github.com/video-dev/hls.js/blob/master/doc/design.md#error-detection-and-handling
-                  // For "level load" fatal errors, see https://github.com/video-dev/hls.js/issues/1138
-                  case Hls.ErrorDetails.MANIFEST_LOAD_ERROR:
-                  case Hls.ErrorDetails.MANIFEST_LOAD_TIMEOUT:
-                  case Hls.ErrorDetails.MANIFEST_PARSING_ERROR:
-                  case Hls.ErrorDetails.LEVEL_LOAD_ERROR:
-                  case Hls.ErrorDetails.LEVEL_LOAD_TIMEOUT:
-                    core.Log.error('hlsjs: unrecoverable network fatal error.', {
-                      evt: evt,
-                      data: data
-                    });
-                    formattedError = this.createError(error);
-                    this.trigger(core.Events.PLAYBACK_ERROR, formattedError);
-                    this.stop();
-                    break;
-                  default:
-                    core.Log.warn('hlsjs: trying to recover from network error.', {
-                      evt: evt,
-                      data: data
-                    });
-                    error.level = core.PlayerError.Levels.WARN;
-                    this._hls.startLoad();
-                    break;
-                }
-                break;
-              case Hls.ErrorTypes.MEDIA_ERROR:
-                core.Log.warn('hlsjs: trying to recover from media error.', {
-                  evt: evt,
-                  data: data
-                });
-                error.level = core.PlayerError.Levels.WARN;
-                this._recover(evt, data, error);
-                break;
-              default:
-                core.Log.error('hlsjs: could not recover from error.', {
-                  evt: evt,
-                  data: data
-                });
-                formattedError = this.createError(error);
-                this.trigger(core.Events.PLAYBACK_ERROR, formattedError);
-                this.stop();
-                break;
-            }
-          } else {
-            core.Log.error('hlsjs: could not recover from error after maximum number of attempts.', {
-              evt: evt,
-              data: data
-            });
-            formattedError = this.createError(error);
-            this.trigger(core.Events.PLAYBACK_ERROR, formattedError);
-            this.stop();
+      this.settings.seekEnabled = this.isSeekEnabled();
+      this.trigger(core.Events.PLAYBACK_SETTINGSUPDATE);
+    }
+    _onHLSJSError(evt, data) {
+      const error = {
+        code: `${data.type}_${data.details}`,
+        description: `${this.name} error: type: ${data.type}, details: ${data.details}`,
+        raw: data
+      };
+      let formattedError;
+      if (data.response) error.description += `, response: ${JSON.stringify(data.response)}`;
+      // only report/handle errors if they are fatal
+      // hlsjs should automatically handle non fatal errors
+      if (data.fatal) {
+        if (this._recoverAttemptsRemaining > 0) {
+          this._recoverAttemptsRemaining -= 1;
+          switch (data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR:
+              switch (data.details) {
+                // The following network errors cannot be recovered with HLS.startLoad()
+                // For more details, see https://github.com/video-dev/hls.js/blob/master/doc/design.md#error-detection-and-handling
+                // For "level load" fatal errors, see https://github.com/video-dev/hls.js/issues/1138
+                case Hls.ErrorDetails.MANIFEST_LOAD_ERROR:
+                case Hls.ErrorDetails.MANIFEST_LOAD_TIMEOUT:
+                case Hls.ErrorDetails.MANIFEST_PARSING_ERROR:
+                case Hls.ErrorDetails.LEVEL_LOAD_ERROR:
+                case Hls.ErrorDetails.LEVEL_LOAD_TIMEOUT:
+                  core.Log.error('hlsjs: unrecoverable network fatal error.', {
+                    evt,
+                    data
+                  });
+                  formattedError = this.createError(error);
+                  this.trigger(core.Events.PLAYBACK_ERROR, formattedError);
+                  this.stop();
+                  break;
+                default:
+                  core.Log.warn('hlsjs: trying to recover from network error.', {
+                    evt,
+                    data
+                  });
+                  error.level = core.PlayerError.Levels.WARN;
+                  this._hls.startLoad();
+                  break;
+              }
+              break;
+            case Hls.ErrorTypes.MEDIA_ERROR:
+              core.Log.warn('hlsjs: trying to recover from media error.', {
+                evt,
+                data
+              });
+              error.level = core.PlayerError.Levels.WARN;
+              this._recover(evt, data, error);
+              break;
+            default:
+              core.Log.error('hlsjs: could not recover from error.', {
+                evt,
+                data
+              });
+              formattedError = this.createError(error);
+              this.trigger(core.Events.PLAYBACK_ERROR, formattedError);
+              this.stop();
+              break;
           }
         } else {
-          // Transforms HLSJS.ErrorDetails.KEY_LOAD_ERROR non-fatal error to
-          // playback fatal error if triggerFatalErrorOnResourceDenied playback
-          // option is set. HLSJS.ErrorTypes.KEY_SYSTEM_ERROR are fatal errors
-          // and therefore already handled.
-          if (this.options.playback.triggerFatalErrorOnResourceDenied && this._keyIsDenied(data)) {
-            core.Log.error('hlsjs: could not load decrypt key.', {
-              evt: evt,
-              data: data
-            });
-            formattedError = this.createError(error);
-            this.trigger(core.Events.PLAYBACK_ERROR, formattedError);
-            this.stop();
-            return;
-          }
-          error.level = core.PlayerError.Levels.WARN;
-          core.Log.warn('hlsjs: non-fatal error occurred', {
-            evt: evt,
-            data: data
+          core.Log.error('hlsjs: could not recover from error after maximum number of attempts.', {
+            evt,
+            data
           });
+          formattedError = this.createError(error);
+          this.trigger(core.Events.PLAYBACK_ERROR, formattedError);
+          this.stop();
         }
+      } else {
+        // Transforms HLSJS.ErrorDetails.KEY_LOAD_ERROR non-fatal error to
+        // playback fatal error if triggerFatalErrorOnResourceDenied playback
+        // option is set. HLSJS.ErrorTypes.KEY_SYSTEM_ERROR are fatal errors
+        // and therefore already handled.
+        if (this.options.playback.triggerFatalErrorOnResourceDenied && this._keyIsDenied(data)) {
+          core.Log.error('hlsjs: could not load decrypt key.', {
+            evt,
+            data
+          });
+          formattedError = this.createError(error);
+          this.trigger(core.Events.PLAYBACK_ERROR, formattedError);
+          this.stop();
+          return;
+        }
+        error.level = core.PlayerError.Levels.WARN;
+        core.Log.warn('hlsjs: non-fatal error occurred', {
+          evt,
+          data
+        });
       }
-    }, {
-      key: "_keyIsDenied",
-      value: function _keyIsDenied(data) {
-        return data.type === Hls.ErrorTypes.NETWORK_ERROR && data.details === Hls.ErrorDetails.KEY_LOAD_ERROR && data.response && data.response.code >= 400;
-      }
-    }, {
-      key: "_onTimeUpdate",
-      value: function _onTimeUpdate() {
-        var update = {
-          current: this.getCurrentTime(),
-          total: this.getDuration(),
-          firstFragDateTime: this.getProgramDateTime()
-        };
-        var shouldThrottle = this._shouldThrottleTimeUpdate(update);
-        if (shouldThrottle) return;
-        this._lastTimeUpdate = update;
-        this._lastTimeUpdateFiredTime = this._now;
-        this.trigger(core.Events.PLAYBACK_TIMEUPDATE, update, this.name);
-      }
-    }, {
-      key: "_shouldThrottleTimeUpdate",
-      value: function _shouldThrottleTimeUpdate(update) {
-        var isSameTime = Math.abs(update.current - this._lastTimeUpdate.current) < this._timeUpdateFiringRate;
-        var isSameDuration = Math.abs(update.total - this._lastTimeUpdate.total) < this._durationChangeMinOffset;
-        var isSameFirstFragDateTime = update.firstFragDateTime === this._lastTimeUpdate.firstFragDateTime;
-        var isSameEventPayload = isSameTime && isSameDuration && isSameFirstFragDateTime;
-        var isThrottled = this._now - this._lastTimeUpdateFiredTime < this._timeUpdateThrottleDelay;
-        return isSameEventPayload && isThrottled;
-      }
-    }, {
-      key: "_onDurationChange",
-      value: function _onDurationChange() {
-        var duration = this.getDuration();
-        var isSameDuration = Math.abs(this._lastDuration - duration) < this._durationChangeMinOffset;
-        if (isSameDuration) return;
-        this._lastDuration = duration;
-        _superPropGet(HlsjsPlayback, "_onDurationChange", this, 3)([]);
+    }
+    _keyIsDenied(data) {
+      return data.type === Hls.ErrorTypes.NETWORK_ERROR && data.details === Hls.ErrorDetails.KEY_LOAD_ERROR && data.response && data.response.code >= 400;
+    }
+    _onTimeUpdate() {
+      const update = {
+        current: this.getCurrentTime(),
+        total: this.getDuration(),
+        firstFragDateTime: this.getProgramDateTime()
+      };
+      const shouldThrottle = this._shouldThrottleTimeUpdate(update);
+      if (shouldThrottle) return;
+      this._lastTimeUpdate = update;
+      this._lastTimeUpdateFiredTime = this._now;
+      this.trigger(core.Events.PLAYBACK_TIMEUPDATE, update, this.name);
+    }
+    _shouldThrottleTimeUpdate(update) {
+      const isSameTime = Math.abs(update.current - this._lastTimeUpdate.current) < this._timeUpdateFiringRate;
+      const isSameDuration = Math.abs(update.total - this._lastTimeUpdate.total) < this._durationChangeMinOffset;
+      const isSameFirstFragDateTime = update.firstFragDateTime === this._lastTimeUpdate.firstFragDateTime;
+      const isSameEventPayload = isSameTime && isSameDuration && isSameFirstFragDateTime;
+      const isThrottled = this._now - this._lastTimeUpdateFiredTime < this._timeUpdateThrottleDelay;
+      return isSameEventPayload && isThrottled;
+    }
+    _onDurationChange() {
+      const duration = this.getDuration();
+      const isSameDuration = Math.abs(this._lastDuration - duration) < this._durationChangeMinOffset;
+      if (isSameDuration) return;
+      this._lastDuration = duration;
+      super._onDurationChange();
+    }
+    _onProgress() {
+      if (!this.el.buffered.length) return;
+      let buffered = [];
+      let bufferedPos = 0;
+      for (let i = 0; i < this.el.buffered.length; i++) {
+        buffered = [...buffered, {
+          // for a stream with sliding window dvr something that is buffered my slide off the start of the timeline
+          start: Math.max(0, this.el.buffered.start(i) - this._playableRegionStartTime),
+          end: Math.max(0, this.el.buffered.end(i) - this._playableRegionStartTime)
+        }];
+        if (this.el.currentTime >= buffered[i].start && this.el.currentTime <= buffered[i].end) {
+          bufferedPos = i;
+        }
+      }
+      const progress = {
+        start: buffered[bufferedPos].start,
+        current: buffered[bufferedPos].end,
+        total: this.getDuration()
+      };
+      this.trigger(core.Events.PLAYBACK_PROGRESS, progress, buffered);
+    }
+    load(url) {
+      this._stopTimeUpdateTimer();
+      this.options.src = url;
+      this._setup();
+    }
+    play() {
+      !this._hls && this._setup();
+      !this._manifestLoading && !this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
+      super.play();
+      this._startTimeUpdateTimer();
+    }
+    pause() {
+      if (!this._hls) return;
+      this.el.pause();
+    }
+    stop() {
+      this._stopTimeUpdateTimer();
+      if (this._hls) super.stop();
+      this._destroyHLSInstance();
+    }
+    destroy() {
+      this._stopTimeUpdateTimer();
+      this._destroyHLSInstance();
+      super.destroy();
+    }
+    _updatePlaybackType(evt, data) {
+      this._playbackType = data.details.live ? core.Playback.LIVE : core.Playback.VOD;
+      this._onLevelUpdated(evt, data);
+      // Live stream subtitle tracks detection hack (may not immediately available)
+      if (this._ccTracksUpdated && this._playbackType === core.Playback.LIVE && this.hasClosedCaptionsTracks) {
+        this._onSubtitleLoaded();
       }
-    }, {
-      key: "_onProgress",
-      value: function _onProgress() {
-        if (!this.el.buffered.length) return;
-        var buffered = [];
-        var bufferedPos = 0;
-        for (var i = 0; i < this.el.buffered.length; i++) {
-          buffered = [].concat(_toConsumableArray(buffered), [{
-            // for a stream with sliding window dvr something that is buffered my slide off the start of the timeline
-            start: Math.max(0, this.el.buffered.start(i) - this._playableRegionStartTime),
-            end: Math.max(0, this.el.buffered.end(i) - this._playableRegionStartTime)
-          }]);
-          if (this.el.currentTime >= buffered[i].start && this.el.currentTime <= buffered[i].end) {
-            bufferedPos = i;
-          }
-        }
-        var progress = {
-          start: buffered[bufferedPos].start,
-          current: buffered[bufferedPos].end,
-          total: this.getDuration()
+    }
+    _fillLevels() {
+      this._levels = this._hls.levels.map((level, index) => {
+        return {
+          id: index,
+          level: level,
+          label: `${level.bitrate / 1000}Kbps`
         };
-        this.trigger(core.Events.PLAYBACK_PROGRESS, progress, buffered);
-      }
-    }, {
-      key: "load",
-      value: function load(url) {
-        this._stopTimeUpdateTimer();
-        this.options.src = url;
-        this._setup();
-      }
-    }, {
-      key: "play",
-      value: function play() {
-        !this._hls && this._setup();
-        !this._manifestLoading && !this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
-        _superPropGet(HlsjsPlayback, "play", this, 3)([]);
-        this._startTimeUpdateTimer();
-      }
-    }, {
-      key: "pause",
-      value: function pause() {
-        if (!this._hls) return;
-        this.el.pause();
-      }
-    }, {
-      key: "stop",
-      value: function stop() {
-        this._stopTimeUpdateTimer();
-        if (this._hls) _superPropGet(HlsjsPlayback, "stop", this, 3)([]);
-        this._destroyHLSInstance();
-      }
-    }, {
-      key: "destroy",
-      value: function destroy() {
-        this._stopTimeUpdateTimer();
-        this._destroyHLSInstance();
-        _superPropGet(HlsjsPlayback, "destroy", this, 3)([]);
-      }
-    }, {
-      key: "_updatePlaybackType",
-      value: function _updatePlaybackType(evt, data) {
-        this._playbackType = data.details.live ? core.Playback.LIVE : core.Playback.VOD;
-        this._onLevelUpdated(evt, data);
-        // Live stream subtitle tracks detection hack (may not immediately available)
-        if (this._ccTracksUpdated && this._playbackType === core.Playback.LIVE && this.hasClosedCaptionsTracks) {
-          this._onSubtitleLoaded();
-        }
-      }
-    }, {
-      key: "_fillLevels",
-      value: function _fillLevels() {
-        this._levels = this._hls.levels.map(function (level, index) {
-          return {
-            id: index,
-            level: level,
-            label: "".concat(level.bitrate / 1000, "Kbps")
+      });
+      this.trigger(core.Events.PLAYBACK_LEVELS_AVAILABLE, this._levels);
+    }
+    _onLevelUpdated(evt, data) {
+      this._segmentTargetDuration = data.details.targetduration;
+      this._playlistType = data.details.type || null;
+      let startTimeChanged = false;
+      let durationChanged = false;
+      const fragments = data.details.fragments;
+      const previousPlayableRegionStartTime = this._playableRegionStartTime;
+      const previousPlayableRegionDuration = this._playableRegionDuration;
+      if (fragments.length === 0) return;
+      // #EXT-X-PROGRAM-DATE-TIME
+      if (fragments[0].rawProgramDateTime) {
+        this._programDateTime = fragments[0].rawProgramDateTime;
+      }
+      if (this._playableRegionStartTime !== fragments[0].start) {
+        startTimeChanged = true;
+        this._playableRegionStartTime = fragments[0].start;
+      }
+      if (startTimeChanged) {
+        if (!this._localStartTimeCorrelation) {
+          // set the correlation to map to middle of the extrapolation window
+          this._localStartTimeCorrelation = {
+            local: this._now,
+            remote: (fragments[0].start + this._extrapolatedWindowDuration / 2) * 1000
           };
-        });
-        this.trigger(core.Events.PLAYBACK_LEVELS_AVAILABLE, this._levels);
-      }
-    }, {
-      key: "_onLevelUpdated",
-      value: function _onLevelUpdated(evt, data) {
-        this._segmentTargetDuration = data.details.targetduration;
-        this._playlistType = data.details.type || null;
-        var startTimeChanged = false;
-        var durationChanged = false;
-        var fragments = data.details.fragments;
-        var previousPlayableRegionStartTime = this._playableRegionStartTime;
-        var previousPlayableRegionDuration = this._playableRegionDuration;
-        if (fragments.length === 0) return;
-        // #EXT-X-PROGRAM-DATE-TIME
-        if (fragments[0].rawProgramDateTime) {
-          this._programDateTime = fragments[0].rawProgramDateTime;
-        }
-        if (this._playableRegionStartTime !== fragments[0].start) {
-          startTimeChanged = true;
-          this._playableRegionStartTime = fragments[0].start;
-        }
-        if (startTimeChanged) {
-          if (!this._localStartTimeCorrelation) {
-            // set the correlation to map to middle of the extrapolation window
+        } else {
+          // check if the correlation still works
+          const corr = this._localStartTimeCorrelation;
+          const timePassed = this._now - corr.local;
+          // this should point to a time within the extrapolation window
+          const startTime = (corr.remote + timePassed) / 1000;
+          if (startTime < fragments[0].start) {
+            // our start time is now earlier than the first chunk
+            // (maybe the chunk was removed early)
+            // reset correlation so that it sits at the beginning of the first available chunk
             this._localStartTimeCorrelation = {
               local: this._now,
-              remote: (fragments[0].start + this._extrapolatedWindowDuration / 2) * 1000
+              remote: fragments[0].start * 1000
+            };
+          } else if (startTime > previousPlayableRegionStartTime + this._extrapolatedWindowDuration) {
+            // start time was past the end of the old extrapolation window (so would have been capped)
+            // see if now that time would be inside the window, and if it would be set the correlation
+            // so that it resumes from the time it was at at the end of the old window
+            // update the correlation so that the time starts counting again from the value it's on now
+            this._localStartTimeCorrelation = {
+              local: this._now,
+              remote: Math.max(fragments[0].start, previousPlayableRegionStartTime + this._extrapolatedWindowDuration) * 1000
             };
-          } else {
-            // check if the correlation still works
-            var corr = this._localStartTimeCorrelation;
-            var timePassed = this._now - corr.local;
-            // this should point to a time within the extrapolation window
-            var startTime = (corr.remote + timePassed) / 1000;
-            if (startTime < fragments[0].start) {
-              // our start time is now earlier than the first chunk
-              // (maybe the chunk was removed early)
-              // reset correlation so that it sits at the beginning of the first available chunk
-              this._localStartTimeCorrelation = {
-                local: this._now,
-                remote: fragments[0].start * 1000
-              };
-            } else if (startTime > previousPlayableRegionStartTime + this._extrapolatedWindowDuration) {
-              // start time was past the end of the old extrapolation window (so would have been capped)
-              // see if now that time would be inside the window, and if it would be set the correlation
-              // so that it resumes from the time it was at at the end of the old window
-              // update the correlation so that the time starts counting again from the value it's on now
-              this._localStartTimeCorrelation = {
-                local: this._now,
-                remote: Math.max(fragments[0].start, previousPlayableRegionStartTime + this._extrapolatedWindowDuration) * 1000
-              };
-            }
-          }
-        }
-        var newDuration = data.details.totalduration;
-        // if it's a live stream then shorten the duration to remove access
-        // to the area after hlsjs's live sync point
-        // seeks to areas after this point sometimes have issues
-        if (this._playbackType === core.Playback.LIVE) {
-          var fragmentTargetDuration = data.details.targetduration;
-          var hlsjsConfig = this.options.playback.hlsjsConfig || {};
-          var liveSyncDurationCount = hlsjsConfig.liveSyncDurationCount || Hls.DefaultConfig.liveSyncDurationCount;
-          var hiddenAreaDuration = fragmentTargetDuration * liveSyncDurationCount;
-          if (hiddenAreaDuration <= newDuration) {
-            newDuration -= hiddenAreaDuration;
-            this._durationExcludesAfterLiveSyncPoint = true;
-          } else {
-            this._durationExcludesAfterLiveSyncPoint = false;
           }
         }
-        if (newDuration !== this._playableRegionDuration) {
-          durationChanged = true;
-          this._playableRegionDuration = newDuration;
-        }
-        // Note the end time is not the playableRegionDuration
-        // The end time will always increase even if content is removed from the beginning
-        var endTime = fragments[0].start + newDuration;
-        var previousEndTime = previousPlayableRegionStartTime + previousPlayableRegionDuration;
-        var endTimeChanged = endTime !== previousEndTime;
-        if (endTimeChanged) {
-          if (!this._localEndTimeCorrelation) {
-            // set the correlation to map to the end
+      }
+      let newDuration = data.details.totalduration;
+      // if it's a live stream then shorten the duration to remove access
+      // to the area after hlsjs's live sync point
+      // seeks to areas after this point sometimes have issues
+      if (this._playbackType === core.Playback.LIVE) {
+        const fragmentTargetDuration = data.details.targetduration;
+        const hlsjsConfig = this.options.playback.hlsjsConfig || {};
+        const liveSyncDurationCount = hlsjsConfig.liveSyncDurationCount || Hls.DefaultConfig.liveSyncDurationCount;
+        const hiddenAreaDuration = fragmentTargetDuration * liveSyncDurationCount;
+        if (hiddenAreaDuration <= newDuration) {
+          newDuration -= hiddenAreaDuration;
+          this._durationExcludesAfterLiveSyncPoint = true;
+        } else {
+          this._durationExcludesAfterLiveSyncPoint = false;
+        }
+      }
+      if (newDuration !== this._playableRegionDuration) {
+        durationChanged = true;
+        this._playableRegionDuration = newDuration;
+      }
+      // Note the end time is not the playableRegionDuration
+      // The end time will always increase even if content is removed from the beginning
+      const endTime = fragments[0].start + newDuration;
+      const previousEndTime = previousPlayableRegionStartTime + previousPlayableRegionDuration;
+      const endTimeChanged = endTime !== previousEndTime;
+      if (endTimeChanged) {
+        if (!this._localEndTimeCorrelation) {
+          // set the correlation to map to the end
+          this._localEndTimeCorrelation = {
+            local: this._now,
+            remote: endTime * 1000
+          };
+        } else {
+          // check if the correlation still works
+          const corr = this._localEndTimeCorrelation;
+          const timePassed = this._now - corr.local;
+          // this should point to a time within the extrapolation window from the end
+          const extrapolatedEndTime = (corr.remote + timePassed) / 1000;
+          if (extrapolatedEndTime > endTime) {
             this._localEndTimeCorrelation = {
               local: this._now,
               remote: endTime * 1000
             };
-          } else {
-            // check if the correlation still works
-            var _corr = this._localEndTimeCorrelation;
-            var _timePassed = this._now - _corr.local;
-            // this should point to a time within the extrapolation window from the end
-            var extrapolatedEndTime = (_corr.remote + _timePassed) / 1000;
-            if (extrapolatedEndTime > endTime) {
-              this._localEndTimeCorrelation = {
-                local: this._now,
-                remote: endTime * 1000
-              };
-            } else if (extrapolatedEndTime < endTime - this._extrapolatedWindowDuration) {
-              // our extrapolated end time is now earlier than the extrapolation window from the actual end time
-              // (maybe a chunk became available early)
-              // reset correlation so that it sits at the beginning of the extrapolation window from the end time
-              this._localEndTimeCorrelation = {
-                local: this._now,
-                remote: (endTime - this._extrapolatedWindowDuration) * 1000
-              };
-            } else if (extrapolatedEndTime > previousEndTime) {
-              // end time was past the old end time (so would have been capped)
-              // set the correlation so that it resumes from the time it was at at the end of the old window
-              this._localEndTimeCorrelation = {
-                local: this._now,
-                remote: previousEndTime * 1000
-              };
-            }
+          } else if (extrapolatedEndTime < endTime - this._extrapolatedWindowDuration) {
+            // our extrapolated end time is now earlier than the extrapolation window from the actual end time
+            // (maybe a chunk became available early)
+            // reset correlation so that it sits at the beginning of the extrapolation window from the end time
+            this._localEndTimeCorrelation = {
+              local: this._now,
+              remote: (endTime - this._extrapolatedWindowDuration) * 1000
+            };
+          } else if (extrapolatedEndTime > previousEndTime) {
+            // end time was past the old end time (so would have been capped)
+            // set the correlation so that it resumes from the time it was at at the end of the old window
+            this._localEndTimeCorrelation = {
+              local: this._now,
+              remote: previousEndTime * 1000
+            };
           }
         }
-
-        // now that the values have been updated call any methods that use on them so they get the updated values
-        // immediately
-        durationChanged && this._onDurationChange();
-        startTimeChanged && this._onProgress();
-      }
-    }, {
-      key: "_onFragmentChanged",
-      value: function _onFragmentChanged(evt, data) {
-        this._currentFragment = data.frag;
-        this.trigger(core.Events.Custom.PLAYBACK_FRAGMENT_CHANGED, data);
-      }
-    }, {
-      key: "_onFragmentLoaded",
-      value: function _onFragmentLoaded(evt, data) {
-        this.trigger(core.Events.PLAYBACK_FRAGMENT_LOADED, data);
-      }
-    }, {
-      key: "_onFragmentBuffered",
-      value: function _onFragmentBuffered(evt, data) {
-        this.trigger(core.Events.PLAYBACK_FRAGMENT_BUFFERED, data);
-      }
-    }, {
-      key: "_onSubtitleLoaded",
-      value: function _onSubtitleLoaded() {
-        // This event may be triggered multiple times
-        // Setup CC only once (disable CC by default)
-        if (!this._ccIsSetup) {
-          this.trigger(core.Events.PLAYBACK_SUBTITLE_AVAILABLE);
-          var trackId = this._playbackType === core.Playback.LIVE ? -1 : this.closedCaptionsTrackId;
-          this.closedCaptionsTrackId = trackId;
-          this._ccIsSetup = true;
-        }
-      }
-    }, {
-      key: "_onLevelSwitch",
-      value: function _onLevelSwitch(evt, data) {
-        if (!this.levels.length) this._fillLevels();
-        this.trigger(core.Events.PLAYBACK_LEVEL_SWITCH_END);
-        this.trigger(core.Events.PLAYBACK_LEVEL_SWITCH, data);
-        var currentLevel = this._hls.levels[data.level];
-        if (currentLevel) {
-          // TODO should highDefinition be private and maybe have a read only accessor if it's used somewhere
-          this.highDefinition = currentLevel.height >= 720 || currentLevel.bitrate / 1000 >= 2000;
-          this.trigger(core.Events.PLAYBACK_HIGHDEFINITIONUPDATE, this.highDefinition);
-          this.trigger(core.Events.PLAYBACK_BITRATE, {
-            height: currentLevel.height,
-            width: currentLevel.width,
-            bandwidth: currentLevel.bitrate,
-            bitrate: currentLevel.bitrate,
-            level: data.level
-          });
-        }
-      }
-    }, {
-      key: "dvrEnabled",
-      get: function get() {
-        // enabled when:
-        // - the duration does not include content after hlsjs's live sync point
-        // - the playable region duration is longer than the configured duration to enable dvr after
-        // - the playback type is LIVE.
-        return this._durationExcludesAfterLiveSyncPoint && this._duration >= this._minDvrSize && this.getPlaybackType() === core.Playback.LIVE;
       }
-    }, {
-      key: "getPlaybackType",
-      value: function getPlaybackType() {
-        return this._playbackType;
-      }
-    }, {
-      key: "isSeekEnabled",
-      value: function isSeekEnabled() {
-        return this._playbackType === core.Playback.VOD || this.dvrEnabled;
-      }
-    }], [{
-      key: "HLSJS",
-      get: function get() {
-        return Hls;
+
+      // now that the values have been updated call any methods that use on them so they get the updated values
+      // immediately
+      durationChanged && this._onDurationChange();
+      startTimeChanged && this._onProgress();
+    }
+    _onFragmentChanged(evt, data) {
+      this._currentFragment = data.frag;
+      this.trigger(core.Events.Custom.PLAYBACK_FRAGMENT_CHANGED, data);
+    }
+    _onFragmentLoaded(evt, data) {
+      this.trigger(core.Events.PLAYBACK_FRAGMENT_LOADED, data);
+    }
+    _onFragmentBuffered(evt, data) {
+      this.trigger(core.Events.PLAYBACK_FRAGMENT_BUFFERED, data);
+    }
+    _onSubtitleLoaded() {
+      // This event may be triggered multiple times
+      // Setup CC only once (disable CC by default)
+      if (!this._ccIsSetup) {
+        this.trigger(core.Events.PLAYBACK_SUBTITLE_AVAILABLE);
+        const trackId = this._playbackType === core.Playback.LIVE ? -1 : this.closedCaptionsTrackId;
+        this.closedCaptionsTrackId = trackId;
+        this._ccIsSetup = true;
+      }
+    }
+    _onLevelSwitch(evt, data) {
+      if (!this.levels.length) this._fillLevels();
+      this.trigger(core.Events.PLAYBACK_LEVEL_SWITCH_END);
+      this.trigger(core.Events.PLAYBACK_LEVEL_SWITCH, data);
+      const currentLevel = this._hls.levels[data.level];
+      if (currentLevel) {
+        // TODO should highDefinition be private and maybe have a read only accessor if it's used somewhere
+        this.highDefinition = currentLevel.height >= 720 || currentLevel.bitrate / 1000 >= 2000;
+        this.trigger(core.Events.PLAYBACK_HIGHDEFINITIONUPDATE, this.highDefinition);
+        this.trigger(core.Events.PLAYBACK_BITRATE, {
+          height: currentLevel.height,
+          width: currentLevel.width,
+          bandwidth: currentLevel.bitrate,
+          bitrate: currentLevel.bitrate,
+          level: data.level
+        });
       }
-    }]);
-  }(core.HTML5Video);
+    }
+    get dvrEnabled() {
+      // enabled when:
+      // - the duration does not include content after hlsjs's live sync point
+      // - the playable region duration is longer than the configured duration to enable dvr after
+      // - the playback type is LIVE.
+      return this._durationExcludesAfterLiveSyncPoint && this._duration >= this._minDvrSize && this.getPlaybackType() === core.Playback.LIVE;
+    }
+    getPlaybackType() {
+      return this._playbackType;
+    }
+    isSeekEnabled() {
+      return this._playbackType === core.Playback.VOD || this.dvrEnabled;
+    }
+  }
   HlsjsPlayback.canPlay = function (resource, mimeType) {
-    var resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || [];
-    var isHls = resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'm3u8' || listContainsIgnoreCase(mimeType, ['application/vnd.apple.mpegurl', 'application/x-mpegURL']);
+    const resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || [];
+    const isHls = resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'm3u8' || listContainsIgnoreCase(mimeType, ['application/vnd.apple.mpegurl', 'application/x-mpegURL']);
     return !!(Hls.isSupported() && isHls);
   };