Add preferManagedMediaSource API.md doc entry for ManagedMediaSourc…

…e usage (#5828)

* Add `preferManagedMediaSource` API.md doc entry, and only emit BUFFER_FLUSHED with removed ranges in ManagedMediaSource "bufferedchange" event

* Add BufferedChangeEvent TypeScript interface
based on w3c proposal w3c/media-source#320

docs/API.md

@@ -46,6 +46,7 @@ See [API Reference](https://hlsjs-dev.video-dev.org/api-docs/) for a complete li
   - [`maxLiveSyncPlaybackRate`](#maxlivesyncplaybackrate)
   - [`liveDurationInfinity`](#livedurationinfinity)
   - [`liveBackBufferLength` (deprecated)](#livebackbufferlength-deprecated)
+  - [`preferManagedMediaSource`](#prefermanagedmediasource)
   - [`enableWorker`](#enableworker)
   - [`workerPath`](#workerpath)
   - [`enableSoftwareAES`](#enablesoftwareaes)
@@ -375,6 +376,7 @@ var config = {
   liveSyncDurationCount: 3,
   liveMaxLatencyDurationCount: Infinity,
   liveDurationInfinity: false,
+  preferManagedMediaSource: false,
   enableWorker: true,
   enableSoftwareAES: true,
   manifestLoadingTimeOut: 10000,
@@ -672,6 +674,12 @@ If you want to have a native Live UI in environments like iOS Safari, Safari, An
 
 `liveBackBufferLength` has been deprecated. Use `backBufferLength` instead.
 
+### `preferManagedMediaSource`
+
+(default `true`)
+
+HLS.js uses the Managed Media Source API (`ManagedMediaSource` global) instead of the `MediaSource` global by default when present. Setting this to `false` will only use `ManagedMediaSource` when `MediaSource` is undefined.
+
 ### `enableWorker`
 
 (default: `true`)

src/controller/buffer-controller.ts

@@ -38,6 +38,11 @@ import type { HlsConfig } from '../hls';
 const VIDEO_CODEC_PROFILE_REPLACE =
   /(avc[1234]|hvc1|hev1|dvh[1e]|vp09|av01)(?:\.[^.,]+)+/;
 
+interface BufferedChangeEvent extends Event {
+  readonly addedRanges?: TimeRanges;
+  readonly removedRanges?: TimeRanges;
+}
+
 export default class BufferController implements ComponentAPI {
   // The level details used to determine duration, target-duration and live
   private details: LevelDetails | null = null;
@@ -936,11 +941,19 @@ export default class BufferController implements ComponentAPI {
           this.addBufferListener(sbName, 'updateend', this._onSBUpdateEnd);
           this.addBufferListener(sbName, 'error', this._onSBUpdateError);
           // ManagedSourceBuffer bufferedchange event
-          this.addBufferListener(sbName, 'bufferedchange', (event) => {
-            this.hls.trigger(Events.BUFFER_FLUSHED, {
-              type: trackName as SourceBufferName,
-            });
-          });
+          this.addBufferListener(
+            sbName,
+            'bufferedchange',
+            (type: SourceBufferName, event: BufferedChangeEvent) => {
+              // If media was ejected check for a change. Added ranges are redundant with changes on 'updateend' event.
+              const removedRanges = event.removedRanges;
+              if (removedRanges) {
+                this.hls.trigger(Events.BUFFER_FLUSHED, {
+                  type: trackName as SourceBufferName,
+                });
+              }
+            },
+          );
 
           this.tracks[trackName] = {
             buffer: sb,