diff --git a/common/changes/@snowplow/browser-plugin-media-tracking/migrate-html5-plugin-to-new-media-plugin_2024-09-24-12-28.json b/common/changes/@snowplow/browser-plugin-media-tracking/migrate-html5-plugin-to-new-media-plugin_2024-09-24-12-28.json
new file mode 100644
index 000000000..58cd5dda4
--- /dev/null
+++ b/common/changes/@snowplow/browser-plugin-media-tracking/migrate-html5-plugin-to-new-media-plugin_2024-09-24-12-28.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@snowplow/browser-plugin-media-tracking",
+      "comment": "Migrate HTML Media Tracking to Snowplow Media Plugin",
+      "type": "none"
+    }
+  ],
+  "packageName": "@snowplow/browser-plugin-media-tracking"
+}
\ No newline at end of file
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 0e0a4fd68..2e6e081e7 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -1189,6 +1189,9 @@ importers:
 
   ../../plugins/browser-plugin-media-tracking:
     dependencies:
+      '@snowplow/browser-plugin-media':
+        specifier: workspace:*
+        version: link:../browser-plugin-media
       '@snowplow/browser-tracker-core':
         specifier: workspace:*
         version: link:../../libraries/browser-tracker-core
@@ -1198,6 +1201,9 @@ importers:
       tslib:
         specifier: ^2.3.1
         version: 2.6.3
+      uuid:
+        specifier: ^8.3.2
+        version: 8.3.2
     devDependencies:
       '@ampproject/rollup-plugin-closure-compiler':
         specifier: ~0.27.0
@@ -1214,6 +1220,9 @@ importers:
       '@types/jsdom':
         specifier: ~16.2.14
         version: 16.2.15
+      '@types/uuid':
+        specifier: ^8.3.2
+        version: 8.3.4
       '@typescript-eslint/eslint-plugin':
         specifier: ~5.15.0
         version: 5.15.0(@typescript-eslint/parser@5.15.0(eslint@8.11.0)(typescript@4.6.4))(eslint@8.11.0)(typescript@4.6.4)
diff --git a/common/config/rush/repo-state.json b/common/config/rush/repo-state.json
index 554c697a3..5cbbca7f3 100644
--- a/common/config/rush/repo-state.json
+++ b/common/config/rush/repo-state.json
@@ -1,5 +1,5 @@
 // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
 {
-  "pnpmShrinkwrapHash": "c364f96ddb4f2ccb56f10dceb499162dffc440f8",
+  "pnpmShrinkwrapHash": "64adeaeaaaae09f264464fa44834bfe036401311",
   "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f"
 }
diff --git a/plugins/browser-plugin-media-tracking/jest.config.js b/plugins/browser-plugin-media-tracking/jest.config.js
index bd3ea4e2a..90f99fb5b 100644
--- a/plugins/browser-plugin-media-tracking/jest.config.js
+++ b/plugins/browser-plugin-media-tracking/jest.config.js
@@ -2,4 +2,5 @@ module.exports = {
   preset: 'ts-jest',
   reporters: ['jest-standard-reporter'],
   testEnvironment: 'jest-environment-jsdom-global',
+  setupFilesAfterEnv: ['../../setupTestGlobals.ts'],
 };
diff --git a/plugins/browser-plugin-media-tracking/package.json b/plugins/browser-plugin-media-tracking/package.json
index f710925c1..3b7201c2d 100644
--- a/plugins/browser-plugin-media-tracking/package.json
+++ b/plugins/browser-plugin-media-tracking/package.json
@@ -21,9 +21,11 @@
     "test": "jest"
   },
   "dependencies": {
+    "@snowplow/browser-plugin-media": "workspace:*",
     "@snowplow/browser-tracker-core": "workspace:*",
     "@snowplow/tracker-core": "workspace:*",
-    "tslib": "^2.3.1"
+    "tslib": "^2.3.1",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@ampproject/rollup-plugin-closure-compiler": "~0.27.0",
@@ -31,6 +33,7 @@
     "@rollup/plugin-node-resolve": "~13.1.3",
     "@types/jest": "~27.4.1",
     "@types/jsdom": "~16.2.14",
+    "@types/uuid": "^8.3.2",
     "@typescript-eslint/eslint-plugin": "~5.15.0",
     "@typescript-eslint/parser": "~5.15.0",
     "eslint": "~8.11.0",
diff --git a/plugins/browser-plugin-media-tracking/src/api.ts b/plugins/browser-plugin-media-tracking/src/api.ts
new file mode 100644
index 000000000..622df6a72
--- /dev/null
+++ b/plugins/browser-plugin-media-tracking/src/api.ts
@@ -0,0 +1,82 @@
+import { Logger } from '@snowplow/tracker-core';
+import { BrowserPlugin, BrowserTracker } from '@snowplow/browser-tracker-core';
+import { waitForElement } from './findElem';
+import { Config, isElementConfig, isStringConfig } from './config';
+import { setUpListeners } from './player';
+import { setConfigDefaults } from './helperFunctions';
+
+// These imports are used for documentation purposes only.
+// Typescript complains that they are unused.
+// @ts-ignore: TS6133
+import { DynamicContext } from '@snowplow/tracker-core';
+// @ts-ignore: TS6133
+import { HTML5MediaEventTypes } from './config';
+// @ts-ignore: TS6133
+import { FilterOutRepeatedEvents } from '@snowplow/browser-plugin-media/src/types';
+
+import { endMediaTracking } from '@snowplow/browser-plugin-media';
+
+let LOG: Logger;
+const _trackers: Record<string, BrowserTracker> = {};
+
+export function MediaTrackingPlugin(): BrowserPlugin {
+  return {
+    activateBrowserPlugin: (tracker: BrowserTracker) => {
+      _trackers[tracker.id] = tracker;
+    },
+    logger: (logger) => {
+      LOG = logger;
+    },
+  };
+}
+
+/**
+ * Enables media tracking on an HTML `<video>` or `<audio>` element.
+ *
+ * @param {Config} config - Configuration options for media tracking.
+ *
+ * **Required:**
+ * - `config.id` (`string`): The session ID. Must be unique for each media element. Used to identify the media session and end tracking.
+ * - `config.video` (string | HTMLMediaElement): The ID of the media element or the element itself.
+ *
+ * **Optional:**
+ * - `config.label` (`string`): A human-readable label for the media element.
+ * - `config.captureEvents` {@link HTML5MediaEventTypes}: A list of media events to track. All events are tracked by default.
+ * - `config.boundaries` (`number[]`): Percentage thresholds (0-100) at which to trigger progress events. Disabled by default.
+ * - `config.context` {@link DynamicContext}: Contexts to attach to each tracking event.
+ *
+ * **Ping Configuration (Optional):**
+ * - `config.pings.pingInterval` (`number`): The interval (in seconds) for sending ping events. Default is 30(s).
+ * - `config.pings.maxPausedPings` (`number`): The maximum number of ping events sent while playback is paused. Default is 1.
+ *
+ * **Other Options (Optional):**
+ * - `config.updatePageActivityWhilePlaying` (`boolean`): Whether to update page activity while media is playing. Enabled by default.
+ * - `config.filterOutRepeatedEvents` {@link FilterOutRepeatedEvents}: Whether to suppress consecutive identical events. Default is false.
+ */
+export function startHtml5MediaTracking(config: Config) {
+  if (!config.video) {
+    LOG.error(
+      "Missing 'video' property in the enableMediaTracking configuration. ",
+      "Ensure the 'config.video' property is correctly set. Current config: ",
+      config
+    );
+    return;
+  }
+
+  config = setConfigDefaults(config);
+
+  if (isStringConfig(config)) {
+    waitForElement(config, setUpListeners);
+  } else if (isElementConfig(config)) {
+    setUpListeners(config);
+  }
+}
+
+/**
+ * Ends media tracking with the given ID if previously started. Clears local state for the media tracking and sends any events waiting to be sent.
+ *
+ * @param {string} id - The session ID.
+ */
+export function endHtml5MediaTracking(id: string) {
+  endMediaTracking({ id });
+}
diff --git a/plugins/browser-plugin-media-tracking/src/buildMediaEvent.ts b/plugins/browser-plugin-media-tracking/src/buildMediaEvent.ts
deleted file mode 100644
index 8223da616..000000000
--- a/plugins/browser-plugin-media-tracking/src/buildMediaEvent.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { eventNames, NETWORK_STATE, READY_STATE } from './constants';
-import { MediaElement, MediaPlayer, MediaPlayerEvent, VideoElement } from './contexts';
-import {
-  dataUrlHandler,
-  getDuration,
-  getUriFileExtension,
-  isElementFullScreen,
-  textTrackListToJson,
-  timeRangesToObjectArray,
-} from './helperFunctions';
-import { EventDetail, MediaEntities, MediaEventData, TrackingOptions } from './types';
-
-export function buildMediaEvent(
-  e: string,
-  el: HTMLAudioElement | HTMLVideoElement,
-  conf: TrackingOptions,
-  detail?: EventDetail
-): MediaEventData {
-  const context = [getHTMLMediaElementEntities(el, conf), getMediaPlayerEntities(el, detail)];
-  if (el instanceof HTMLVideoElement) context.push(getHTMLVideoElementEntities(el as HTMLVideoElement));
-  const data: MediaPlayerEvent = { type: e in eventNames ? eventNames[e] : e };
-  if (conf.label) data.label = conf.label;
-  return {
-    schema: 'iglu:com.snowplowanalytics.snowplow/media_player_event/jsonschema/1-0-0',
-    data: data,
-    context: context,
-  };
-}
-
-function getMediaPlayerEntities(el: HTMLAudioElement | HTMLVideoElement, detail?: EventDetail): MediaEntities {
-  const data: MediaPlayer = {
-    currentTime: el.currentTime || 0,
-    duration: getDuration(el),
-    ended: el.ended,
-    loop: el.loop,
-    muted: el.muted,
-    paused: el.paused,
-    playbackRate: el.playbackRate,
-    volume: parseInt(String(el.volume * 100)),
-  };
-  if (detail?.boundary) {
-    data.percentProgress = detail.boundary;
-  }
-  return {
-    schema: 'iglu:com.snowplowanalytics.snowplow/media_player/jsonschema/1-0-0',
-    data: data,
-  };
-}
-
-function getHTMLMediaElementEntities(el: HTMLAudioElement | HTMLVideoElement, conf: TrackingOptions): MediaEntities {
-  // In cases where the media does not have explicit id, we use the container id passed from the configuration.
-  const htmlId = el.id || conf.id;
-  const data: MediaElement = {
-    htmlId,
-    mediaType: el.tagName as MediaElement['mediaType'],
-    autoPlay: el.autoplay,
-    buffered: timeRangesToObjectArray(el.buffered),
-    controls: el.controls,
-    currentSrc: el.currentSrc,
-    defaultMuted: el.defaultMuted || false,
-    defaultPlaybackRate: el.defaultPlaybackRate,
-    error: el.error ? { code: el.error?.code, message: el.error?.message } : null,
-    networkState: NETWORK_STATE[el.networkState] as MediaElement['networkState'],
-    preload: el.preload,
-    readyState: READY_STATE[el.readyState] as MediaElement['readyState'],
-    seekable: timeRangesToObjectArray(el.seekable),
-    seeking: el.seeking,
-    src: dataUrlHandler(el.src || el.currentSrc),
-    textTracks: textTrackListToJson(el.textTracks),
-    fileExtension: getUriFileExtension(el.currentSrc),
-    fullscreen: isElementFullScreen(el.id),
-    pictureInPicture: document.pictureInPictureElement?.id === el.id,
-  };
-  if (el.disableRemotePlayback) data.disableRemotePlayback = el.disableRemotePlayback;
-  if (el.crossOrigin) data.crossOrigin = el.crossOrigin;
-  return {
-    schema: 'iglu:org.whatwg/media_element/jsonschema/1-0-0',
-    data: data,
-  };
-}
-
-function getHTMLVideoElementEntities(el: HTMLVideoElement): MediaEntities {
-  const data: VideoElement = {
-    poster: el.poster,
-    videoHeight: el.videoHeight,
-    videoWidth: el.videoWidth,
-  };
-  if (el.autoPictureInPicture) data.autoPictureInPicture = el.autoPictureInPicture;
-  if (el.disablePictureInPicture) data.disablePictureInPicture = el.disablePictureInPicture;
-  return {
-    schema: 'iglu:org.whatwg/video_element/jsonschema/1-0-0',
-    data: data,
-  };
-}
diff --git a/plugins/browser-plugin-media-tracking/src/config.ts b/plugins/browser-plugin-media-tracking/src/config.ts
new file mode 100644
index 000000000..5d57c2c8f
--- /dev/null
+++ b/plugins/browser-plugin-media-tracking/src/config.ts
@@ -0,0 +1,42 @@
+import { MediaEventType } from '@snowplow/browser-plugin-media';
+import { CommonMediaEventProperties, MediaTrackingConfiguration } from '@snowplow/browser-plugin-media/src/types';
+
+export type HTML5MediaEventTypes = Extract<
+  MediaEventType,
+  | MediaEventType.Ready
+  | MediaEventType.Play
+  | MediaEventType.Pause
+  | MediaEventType.End
+  | MediaEventType.SeekEnd
+  | MediaEventType.PlaybackRateChange
+  | MediaEventType.VolumeChange
+  | MediaEventType.FullscreenChange
+  | MediaEventType.PictureInPictureChange
+  | MediaEventType.BufferStart
+  | MediaEventType.BufferEnd
+  | MediaEventType.Error
+  | MediaEventType.Ping
+  | MediaEventType.PercentProgress
+>;
+
+export type Config = {
+  video: string | HTMLMediaElement;
+  label?: string;
+} & CommonMediaEventProperties &
+  Omit<MediaTrackingConfiguration, 'player'>;
+
+export interface StringConfig extends Config {
+  video: string;
+}
+
+export function isStringConfig(config: Config): config is StringConfig {
+  return typeof config.video === 'string';
+}
+
+export interface ElementConfig extends Config {
+  video: HTMLMediaElement;
+}
+
+export function isElementConfig(config: Config): config is ElementConfig {
+  return config.video instanceof HTMLMediaElement;
+}
diff --git a/plugins/browser-plugin-media-tracking/src/constants.ts b/plugins/browser-plugin-media-tracking/src/constants.ts
index a969131ff..06da83b93 100644
--- a/plugins/browser-plugin-media-tracking/src/constants.ts
+++ b/plugins/browser-plugin-media-tracking/src/constants.ts
@@ -1,6 +1,8 @@
-import { TextTrackEvent } from './mediaEvents';
-import { SearchError } from './types';
-
+export enum SEARCH_ERROR {
+  NOT_FOUND = 'Media element not found',
+  MULTIPLE_ELEMENTS = 'More than one media element in the provided node',
+  PLYR_CURRENTSRC = 'Plyr currentSrc not updated',
+}
 export const READY_STATE: Record<number, string> = {
   0: 'HAVE_NOTHING',
   1: 'HAVE_METADATA',
@@ -15,19 +17,3 @@ export const NETWORK_STATE: Record<number, string> = {
   2: 'NETWORK_LOADING',
   3: 'NETWORK_NO_SOURCE',
 };
-
-export const TAG: Record<string, string> = {
-  VIDEO: 'VIDEO',
-  AUDIO: 'AUDIO',
-};
-
-export const SEARCH_ERROR: SearchError = {
-  NOT_FOUND: 'Media element not found',
-  MULTIPLE_ELEMENTS: 'More than one media element in the provided node',
-  PLYR_CURRENTSRC: 'Plyr currentSrc not updated',
-};
-
-export const eventNames: Record<string, string> = {
-  [TextTrackEvent.CHANGE]: 'texttrackchange',
-};
-Object.keys(eventNames).forEach((k) => (eventNames[eventNames[k]] = k));
diff --git a/plugins/browser-plugin-media-tracking/src/contexts.ts b/plugins/browser-plugin-media-tracking/src/contexts.ts
deleted file mode 100644
index 807c55560..000000000
--- a/plugins/browser-plugin-media-tracking/src/contexts.ts
+++ /dev/null
@@ -1,238 +0,0 @@
-/*
- * Copyright (c) 2022 Snowplow Analytics Ltd, 2010 Anthon Pang
- * All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *
- * 1. Redistributions of source code must retain the above copyright notice, this
- *    list of conditions and the following disclaimer.
- *
- * 2. Redistributions in binary form must reproduce the above copyright notice,
- *    this list of conditions and the following disclaimer in the documentation
- *    and/or other materials provided with the distribution.
- *
- * 3. Neither the name of the copyright holder nor the names of its
- *    contributors may be used to endorse or promote products derived from
- *    this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
- * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
- * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
- * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
- * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
- * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-import { TextTrack } from './types';
-
-interface TimeRange {
-  start: number;
-  end: number;
-}
-
-export interface VideoElement {
-  /**
-   * A boolean value that is true if the video should enter or leave picture-in-picture mode automatically when changing tab and/or application
-   **/
-  autoPictureInPicture?: boolean | null;
-
-  /**
-   * The disablePictureInPicture property will hint the user agent to not suggest the picture-in-picture to users or to request it automatically
-   **/
-  disablePictureInPicture?: boolean | null;
-
-  /**
-   * 'poster' HTML attribute, which specifies an image to show while no video data is available
-   **/
-  poster?: string | null;
-
-  /**
-   * A value indicating the intrinsic height of the resource in CSS pixels, or 0 if no media is available yet
-   **/
-  videoHeight: number;
-
-  /**
-   * A value indicating the intrinsic width of the resource in CSS pixels, or 0 if no media is available yet
-   **/
-  videoWidth: number;
-  [key: string]: unknown;
-}
-
-export interface MediaElement {
-  /**
-   * If playback should automatically begin as soon as enough media is available to do so without interruption
-   **/
-  autoPlay: boolean;
-
-  /**
-   * An array of time ranges that have been buffered
-   **/
-  buffered: TimeRange[];
-
-  /**
-   * If the user agent should provide it's own set of controls
-   **/
-  controls: boolean;
-
-  /**
-   * CORS settings value of the media player
-   **/
-  crossOrigin?: string | null;
-
-  /**
-   * The absolute URL of the media resource
-   **/
-  currentSrc: string;
-
-  /**
-   * If audio is muted by default
-   **/
-  defaultMuted: boolean;
-
-  /**
-   * The default media playback rate of the player
-   **/
-  defaultPlaybackRate: number;
-
-  /**
-   * If the media element is allowed to have a remote playback UI
-   **/
-  disableRemotePlayback?: boolean | null;
-
-  /**
-   * An object of the latest error to occur, or null if no errors
-   **/
-  error?: object | null;
-
-  /**
-   * The media file format
-   **/
-  fileExtension: string | null;
-
-  /**
-   * If the video element is fullscreen
-   **/
-  fullscreen?: boolean | null;
-
-  /**
-   * If the media is a video element, or audio
-   **/
-  mediaType: 'AUDIO' | 'VIDEO';
-
-  /**
-   * The current state of the fetching of media over the network
-   **/
-  networkState: 'NETWORK_EMPTY' | 'NETWORK_IDLE' | 'NETWORK_LOADING' | 'NETWORK_NO_SOURCE';
-
-  /**
-   * If the video element is showing Picture-In-Picture
-   **/
-  pictureInPicture?: boolean | null;
-
-  /**
-   * An array of time ranges played
-   **/
-  played?: TimeRange[];
-
-  /**
-   * The HTML id of the element
-   **/
-  htmlId: string;
-
-  /**
-   * The 'preload' HTML attribute of the media
-   **/
-  preload: string;
-
-  /**
-   * The readiness of the media
-   **/
-  readyState: 'HAVE_NOTHING' | 'HAVE_METADATA' | 'HAVE_CURRENT_DATA' | 'HAVE_FUTURE_DATA' | 'HAVE_ENOUGH_DATA';
-
-  /**
-   * Seekable time range(s)
-   **/
-  seekable: TimeRange[];
-
-  /**
-   * If the media is in the process of seeking to a new position
-   **/
-  seeking: boolean;
-
-  /**
-   * The 'src' HTML attribute of the media element
-   **/
-  src: string;
-
-  /**
-   * An array of TextTrack objects on the media element
-   **/
-  textTracks?: TextTrack[];
-  [key: string]: unknown;
-}
-
-export interface MediaPlayerEvent {
-  /**
-   * The event fired by the media player
-   **/
-  type: string;
-
-  /**
-   * The custom media identifier given by the user
-   **/
-  mediaLabel?: string | null;
-  [key: string]: unknown;
-}
-
-export interface MediaPlayer {
-  /**
-   * The current playback time
-   **/
-  currentTime: number;
-
-  /**
-   * A double-precision floating-point value indicating the duration of the media in seconds
-   **/
-  duration?: number | null;
-
-  /**
-   * If playback of the media has ended
-   **/
-  ended: boolean;
-
-  /**
-   * If the video should restart after ending
-   **/
-  loop: boolean;
-
-  /**
-   * If the media element is muted
-   **/
-  muted: boolean;
-
-  /**
-   * If the media element is paused
-   **/
-  paused: boolean;
-
-  /**
-   * The percent of the way through the media
-   **/
-  percentProgress?: number | null;
-
-  /**
-   * Playback rate (1 is normal)
-   **/
-  playbackRate: number;
-
-  /**
-   * Volume level
-   **/
-  volume: number;
-  [key: string]: unknown;
-}
diff --git a/plugins/browser-plugin-media-tracking/src/entities.ts b/plugins/browser-plugin-media-tracking/src/entities.ts
new file mode 100644
index 000000000..dcb88ad36
--- /dev/null
+++ b/plugins/browser-plugin-media-tracking/src/entities.ts
@@ -0,0 +1,56 @@
+import { NETWORK_STATE, READY_STATE } from './constants';
+import { MediaElement, VideoElement } from './types';
+import {
+  dataUrlHandler,
+  getUriFileExtension,
+  isFullScreen,
+  textTrackListToJson,
+  timeRangesToObjectArray,
+} from './helperFunctions';
+import { SelfDescribingJson } from '@snowplow/tracker-core';
+
+export function buildHTMLMediaElementEntity(el: HTMLAudioElement | HTMLVideoElement): SelfDescribingJson {
+  const data: MediaElement = {
+    // htmlId is a required property in the schema, but may not be present if
+    // the user provided the element themselves
+    htmlId: el.id || '',
+    mediaType: el.tagName as MediaElement['mediaType'],
+    autoPlay: el.autoplay,
+    buffered: timeRangesToObjectArray(el.buffered),
+    controls: el.controls,
+    currentSrc: el.currentSrc,
+    defaultMuted: el.defaultMuted || false,
+    defaultPlaybackRate: el.defaultPlaybackRate,
+    error: el.error ? { code: el.error?.code, message: el.error?.message } : null,
+    networkState: NETWORK_STATE[el.networkState] as MediaElement['networkState'],
+    preload: el.preload,
+    readyState: READY_STATE[el.readyState] as MediaElement['readyState'],
+    seekable: timeRangesToObjectArray(el.seekable),
+    seeking: el.seeking,
+    src: dataUrlHandler(el.src || el.currentSrc),
+    textTracks: textTrackListToJson(el.textTracks),
+    fileExtension: getUriFileExtension(el.currentSrc),
+    fullscreen: isFullScreen(el),
+    pictureInPicture: document.pictureInPictureElement === el,
+  };
+  if (el.disableRemotePlayback) data.disableRemotePlayback = el.disableRemotePlayback;
+  if (el.crossOrigin) data.crossOrigin = el.crossOrigin;
+  return {
+    schema: 'iglu:org.whatwg/media_element/jsonschema/1-0-0',
+    data,
+  };
+}
+
+export function buildHTMLVideoElementEntity(el: HTMLVideoElement): SelfDescribingJson {
+  const data: VideoElement = {
+    poster: el.poster,
+    videoHeight: el.videoHeight,
+    videoWidth: el.videoWidth,
+  };
+  if (el.hasAttribute('autopictureinpicture')) data.autoPictureInPicture = true;
+  if (el.disablePictureInPicture) data.disablePictureInPicture = el.disablePictureInPicture;
+  return {
+    schema: 'iglu:org.whatwg/video_element/jsonschema/1-0-0',
+    data,
+  };
+}
diff --git a/plugins/browser-plugin-media-tracking/src/eventGroups.ts b/plugins/browser-plugin-media-tracking/src/eventGroups.ts
deleted file mode 100644
index df5fdcc6e..000000000
--- a/plugins/browser-plugin-media-tracking/src/eventGroups.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { EventGroup } from './types';
-import { DocumentEvent, MediaEvent, SnowplowEvent, TextTrackEvent, VideoEvent } from './mediaEvents';
-
-const enumValues = (enumType: any) => Object.keys(enumType).map((key) => enumType[key]);
-
-export const AllEvents: EventGroup = [
-  ...enumValues(MediaEvent),
-  ...enumValues(SnowplowEvent),
-  ...enumValues(VideoEvent),
-  ...enumValues(TextTrackEvent),
-  ...enumValues(DocumentEvent),
-];
-
-export const DefaultEvents: EventGroup = [
-  SnowplowEvent.READY,
-  MediaEvent.PAUSE,
-  MediaEvent.PLAY,
-  MediaEvent.SEEKED,
-  MediaEvent.RATECHANGE,
-  MediaEvent.VOLUMECHANGE,
-  MediaEvent.ENDED,
-  DocumentEvent.FULLSCREENCHANGE,
-  SnowplowEvent.PERCENTPROGRESS,
-];
-
-export const EventGroups: Record<string, EventGroup> = {
-  AllEvents: AllEvents,
-  DefaultEvents: DefaultEvents,
-};
diff --git a/plugins/browser-plugin-media-tracking/src/findElem.ts b/plugins/browser-plugin-media-tracking/src/findElem.ts
new file mode 100644
index 000000000..6fffe2e00
--- /dev/null
+++ b/plugins/browser-plugin-media-tracking/src/findElem.ts
@@ -0,0 +1,80 @@
+import { LOG } from '@snowplow/tracker-core';
+import { ElementConfig, StringConfig } from './config';
+import { SEARCH_ERROR } from './constants';
+import { SearchResult } from './types';
+import { isHtmlAudioElement, isHtmlMediaElement, isHtmlVideoElement } from './helperFunctions';
+
+/**
+ * Waits for an HTML media element and invokes a callback with the element once found.
+ *
+ * - First, it tries to find the media element by id
+ *   - If found and valid (`isHtmlMediaElement()`), the callback is called with the updated config.
+ *   - If not found, a warning is logged and a `MutationObserver` is set up.
+ *
+ * - The `MutationObserver` watches for new elements added to the DOM. When the target media element is detected,
+ *   the callback is invoked, and the observer disconnects.
+ *
+ * Useful for cases where the media element might not be in the DOM immediately.
+ */
+export function waitForElement(config: StringConfig, callback: (element: ElementConfig) => void) {
+  const { el, err } = findMediaElement(config.video);
+  if (err) {
+    LOG.info(`${err}. Waiting for element to be added to the DOM.`);
+  }
+
+  if (isHtmlMediaElement(el)) {
+    callback({ ...config, video: el });
+  } else {
+    let observer = new MutationObserver((mutations) => {
+      mutations.forEach((mut) => {
+        if (!mut.addedNodes) {
+          return;
+        }
+        for (let node of Object.values(mut.addedNodes)) {
+          if (isHtmlMediaElement(node) && node.id === config.video) {
+            callback({ ...config, video: node });
+            observer.disconnect();
+          }
+        }
+      });
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+  }
+}
+
+export function findMediaElement(id: string): SearchResult {
+  let el: HTMLElement | null = document.getElementById(id);
+
+  if (!el) return { err: SEARCH_ERROR.NOT_FOUND };
+  if (isHtmlAudioElement(el)) return { el };
+
+  if (isHtmlVideoElement(el)) {
+    // Plyr loads in an initial blank video with currentSrc as https://cdn.plyr.io/static/blank.mp4
+    // so we need to check until currentSrc updates.
+    if (el.currentSrc === 'https://cdn.plyr.io/static/blank.mp4' && el.readyState === 0) {
+      return { err: SEARCH_ERROR.PLYR_CURRENTSRC };
+    }
+    return { el };
+  }
+
+  return findMediaElementChild(el);
+}
+
+function findMediaElementChild(el: Element): SearchResult {
+  for (let tag of ['VIDEO', 'AUDIO']) {
+    let descendentTags = el.getElementsByTagName(tag);
+    if (descendentTags.length === 1) {
+      const el = descendentTags[0];
+      if (isHtmlAudioElement(el) || isHtmlVideoElement(el)) {
+        return { el };
+      }
+    } else if (descendentTags.length === 2 && tag === 'VIDEO' && isHtmlVideoElement(descendentTags[0])) {
+      // Special JWPlayer case where two video elements are used for cover-video effect.
+      // In that case, we select the first video element.
+      return { el: descendentTags[0] };
+    } else if (descendentTags.length > 1) {
+      return { err: SEARCH_ERROR.MULTIPLE_ELEMENTS };
+    }
+  }
+  return { err: SEARCH_ERROR.NOT_FOUND };
+}
diff --git a/plugins/browser-plugin-media-tracking/src/findMediaElement.ts b/plugins/browser-plugin-media-tracking/src/findMediaElement.ts
deleted file mode 100644
index b97d4db45..000000000
--- a/plugins/browser-plugin-media-tracking/src/findMediaElement.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { SEARCH_ERROR, TAG } from './constants';
-import { SearchResult } from './types';
-
-export function findMediaElem(id: string): SearchResult {
-  let el: HTMLVideoElement | HTMLAudioElement | HTMLElement | null = document.getElementById(id);
-
-  if (!el) return { err: SEARCH_ERROR.NOT_FOUND };
-  if (isAudioElement(el)) return { el: el };
-
-  if (isVideoElement(el)) {
-    // Plyr loads in an initial blank video with currentSrc as https://cdn.plyr.io/static/blank.mp4
-    // so we need to check until currentSrc updates
-    if (el.currentSrc === 'https://cdn.plyr.io/static/blank.mp4' && el.readyState === 0) {
-      return { err: SEARCH_ERROR.PLYR_CURRENTSRC };
-    }
-    return { el: el };
-  }
-
-  return findMediaElementChild(el);
-}
-
-function findMediaElementChild(el: Element): SearchResult {
-  for (let tag of Object.keys(TAG)) {
-    let elem = el.getElementsByTagName(tag);
-    if (elem.length === 1) {
-      if (isAudioElement(elem[0])) return { el: elem[0] };
-      if (isVideoElement(elem[0])) return { el: elem[0] };
-    } else if (elem.length === 2 && tag === 'VIDEO' && isVideoElement(elem[0])) {
-      // Special JWPlayer case where two video elements are used for cover-video effect.
-      // In that case, we select the first video element.
-      return { el: elem[0] };
-    } else if (elem.length > 1) {
-      return { err: SEARCH_ERROR.MULTIPLE_ELEMENTS };
-    }
-  }
-  return { err: SEARCH_ERROR.NOT_FOUND };
-}
-
-function isAudioElement(el: Element): el is HTMLAudioElement {
-  return el.tagName === TAG.AUDIO;
-}
-
-function isVideoElement(el: Element): el is HTMLVideoElement {
-  return el.tagName === TAG.VIDEO;
-}
diff --git a/plugins/browser-plugin-media-tracking/src/helperFunctions.ts b/plugins/browser-plugin-media-tracking/src/helperFunctions.ts
index 1a3a2a915..d5d025a2e 100644
--- a/plugins/browser-plugin-media-tracking/src/helperFunctions.ts
+++ b/plugins/browser-plugin-media-tracking/src/helperFunctions.ts
@@ -1,49 +1,19 @@
-import { eventNames } from './constants';
-import { AllEvents, DefaultEvents, EventGroups } from './eventGroups';
-import { MediaEvent, SnowplowEvent } from './mediaEvents';
-import { EventGroup, MediaTrackingOptions, TextTrack, TrackingOptions } from './types';
+import { Config } from './config';
 
-export function timeRangesToObjectArray(t: TimeRanges): { start: number; end: number }[] {
-  const out = [];
-  for (let i = 0; i < t.length; i++) {
-    out.push({ start: t.start(i), end: t.end(i) });
-  }
-  return out;
+export function isFullScreen(el: HTMLMediaElement): boolean {
+  return document.fullscreenElement === el || false;
 }
 
-export function textTrackListToJson(textTrackList: TextTrackList): TextTrack[] {
-  return Object.keys(textTrackList).map((_, i) => {
-    return {
-      label: textTrackList[i].label,
-      language: textTrackList[i].language,
-      kind: textTrackList[i].kind,
-      mode: textTrackList[i].mode,
-    };
-  });
+export function isHtmlMediaElement(element?: Node): element is HTMLMediaElement {
+  return element instanceof HTMLMediaElement;
 }
 
-export function isType(e: string, _type: Record<string, string>): boolean {
-  return (
-    Object.keys(_type)
-      .map((k: string) => _type[k])
-      .indexOf(e) !== -1
-  );
+export function isHtmlAudioElement(element?: Node): element is HTMLAudioElement {
+  return element instanceof HTMLAudioElement;
 }
 
-export function isElementFullScreen(id: string): boolean {
-  return document.fullscreenElement?.id === id || false;
-}
-
-export function boundaryErrorHandling(boundaries: number[]): number[] {
-  // Remove any elements that are out of bounds
-  if (boundaries.some((b) => b < 1 || 100 < b)) {
-    boundaries = boundaries.filter((b) => 0 < b && b < 100);
-  }
-  // Remove any duplicate elements
-  if (boundaries.some((b, _, self) => self.filter((f) => f == b).length > 1)) {
-    boundaries = boundaries.filter((item, pos, self) => self.indexOf(item) == pos);
-  }
-  return boundaries;
+export function isHtmlVideoElement(element?: Node): element is HTMLVideoElement {
+  return element instanceof HTMLVideoElement;
 }
 
 export function getUriFileExtension(uri: string): string | null {
@@ -61,49 +31,14 @@ export function getUriFileExtension(uri: string): string | null {
   return match && match[1];
 }
 
-export function trackingOptionsParser(id: string, trackingOptions?: MediaTrackingOptions): TrackingOptions {
-  const defaults: TrackingOptions = {
-    id: id,
-    captureEvents: DefaultEvents,
-    progress: {
-      boundaries: [10, 25, 50, 75],
-      boundaryTimeoutIds: [],
-    },
-    volume: {
-      trackingInterval: 250,
-    },
-  };
-
-  if (!trackingOptions) return defaults;
-
-  if (trackingOptions?.captureEvents) {
-    let parsedEvents: string[] | EventGroup = [];
-    trackingOptions.captureEvents.forEach((ev) => {
-      // If an event is an EventGroup, get the events from that group
-      if (EventGroups.hasOwnProperty(ev)) {
-        parsedEvents = parsedEvents.concat(EventGroups[ev]);
-      } else if (!Object.keys(AllEvents).filter((k) => k === ev)) {
-        console.warn(`'${ev}' is not a valid event.`);
-      } else {
-        parsedEvents.push(ev in eventNames ? eventNames[ev] : ev);
-      }
-    });
-
-    trackingOptions.captureEvents = parsedEvents;
-    if (trackingOptions.captureEvents.indexOf(SnowplowEvent.PERCENTPROGRESS) !== -1) {
-      defaults.progress = {
-        boundaries: trackingOptions?.boundaries || defaults.progress!.boundaries,
-        boundaryTimeoutIds: [],
-      };
-    }
-
-    if (trackingOptions.captureEvents.indexOf(MediaEvent.VOLUMECHANGE) !== -1) {
-      defaults.volume = {
-        trackingInterval: trackingOptions?.volumeChangeTrackingInterval || defaults.volume!.trackingInterval,
-      };
-    }
+export function getDuration(el: HTMLAudioElement | HTMLVideoElement): number | null {
+  const duration = el.duration;
+  // A NaN value is returned if duration is not available, or Infinity if the media resource is streaming.
+  if (isNaN(duration) || duration === Infinity) {
+    return null;
   }
-  return { ...defaults, ...trackingOptions };
+
+  return duration;
 }
 
 // Checks if a url is a data_url, so we don't send a (potentially large) payload
@@ -114,12 +49,40 @@ export function dataUrlHandler(url: string): string {
   return url;
 }
 
-export function getDuration(el: HTMLAudioElement | HTMLVideoElement): number | null {
-  const duration = el.duration;
-  // A NaN value is returned if duration is not available, or Infinity if the media resource is streaming.
-  if (isNaN(duration) || duration === Infinity) {
-    return null;
+type TimeRange = { start: number; end: number };
+export function timeRangesToObjectArray(t: TimeRanges): TimeRange[] {
+  const out: TimeRange[] = [];
+  for (let i = 0; i < t.length; i++) {
+    out.push({ start: t.start(i), end: t.end(i) });
   }
+  return out;
+}
 
-  return duration;
+type TextTrack = {
+  label: string;
+  language: string;
+  kind: string;
+  mode: string;
+};
+export function textTrackListToJson(textTrackList: TextTrackList): TextTrack[] {
+  return Object.keys(textTrackList).map((_, i) => {
+    return {
+      label: textTrackList[i].label,
+      language: textTrackList[i].language,
+      kind: textTrackList[i].kind,
+      mode: textTrackList[i].mode,
+    };
+  });
+}
+
+export function setConfigDefaults(config: Config): Config {
+  const defaults = {
+    boundaries: [10, 25, 50, 75],
+  };
+
+  return { ...defaults, ...config };
+}
+
+export function parseVolume(volume: number): number {
+  return parseInt((volume * 100).toString());
 }
diff --git a/plugins/browser-plugin-media-tracking/src/index.ts b/plugins/browser-plugin-media-tracking/src/index.ts
index f23f94246..b1c13e734 100644
--- a/plugins/browser-plugin-media-tracking/src/index.ts
+++ b/plugins/browser-plugin-media-tracking/src/index.ts
@@ -1,246 +1 @@
-/*
- * Copyright (c) 2022 Snowplow Analytics Ltd
- * All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *
- * 1. Redistributions of source code must retain the above copyright notice, this
- *    list of conditions and the following disclaimer.
- *
- * 2. Redistributions in binary form must reproduce the above copyright notice,
- *    this list of conditions and the following disclaimer in the documentation
- *    and/or other materials provided with the distribution.
- *
- * 3. Neither the name of the copyright holder nor the names of its
- *    contributors may be used to endorse or promote products derived from
- *    this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
- * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
- * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
- * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
- * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
- * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-import { isType, boundaryErrorHandling, trackingOptionsParser } from './helperFunctions';
-import { DocumentEvent, MediaEvent, SnowplowEvent, TextTrackEvent } from './mediaEvents';
-import { TrackingOptions, MediaTrackingOptions, TrackedElement, EventDetail } from './types';
-import { BrowserPlugin, BrowserTracker, dispatchToTrackersInCollection } from '@snowplow/browser-tracker-core';
-import { buildSelfDescribingEvent, CommonEventProperties, Logger, SelfDescribingJson } from '@snowplow/tracker-core';
-import { MediaPlayerEvent } from './contexts';
-import { findMediaElem } from './findMediaElement';
-import { buildMediaEvent } from './buildMediaEvent';
-import { SEARCH_ERROR } from './constants';
-
-declare global {
-  interface HTMLVideoElement {
-    autoPictureInPicture: boolean;
-    disableRemotePlayback: boolean;
-    disablePictureInPicture: boolean;
-  }
-  interface HTMLAudioElement {
-    disableRemotePlayback: boolean;
-  }
-  interface Document {
-    pictureInPictureElement: Element;
-    msFullscreenElement: Element;
-  }
-}
-
-let LOG: Logger;
-const _trackers: Record<string, BrowserTracker> = {};
-
-export function MediaTrackingPlugin(): BrowserPlugin {
-  return {
-    activateBrowserPlugin: (tracker: BrowserTracker) => {
-      _trackers[tracker.id] = tracker;
-    },
-    logger: (logger) => {
-      LOG = logger;
-    },
-  };
-}
-
-const trackedIds: Record<string, TrackedElement> = {};
-
-// IE doesn't assign the 'target' property to the element a fullscreen event was called from,
-// so need to track the element that is fullscreen, so when leaving fullscreen, we can
-// check which id to track the event for (as document.fullscreenElement is null at that point)
-let fullscreenElementId: string = '';
-
-export function enableMediaTracking(args: { id: string; options?: MediaTrackingOptions }) {
-  const conf: TrackingOptions = trackingOptionsParser(args.id, args.options);
-
-  // Some events have additional effects/need to perform checks before running mediaPlayerEvent
-  const eventsWithOtherFunctions: Record<string, Function> = {
-    [DocumentEvent.FULLSCREENCHANGE]: (e: string, el: HTMLAudioElement | HTMLVideoElement, conf: TrackingOptions) => {
-      // If there is no fullscreen element, it means we are entering fullscreen
-      if (document.fullscreenElement || document.msFullscreenElement) {
-        fullscreenElementId = document.fullscreenElement?.id || document.msFullscreenElement?.id;
-      }
-      if (fullscreenElementId === el.id) {
-        mediaPlayerEvent(e, el, conf);
-      }
-    },
-    [MediaEvent.SEEKED]: (eventName: string, el: HTMLAudioElement | HTMLVideoElement, conf: TrackingOptions) => {
-      if (conf.captureEvents.indexOf(SnowplowEvent.PERCENTPROGRESS) !== 0) {
-        while (conf.progress!.boundaryTimeoutIds.length) {
-          clearTimeout(conf.progress!.boundaryTimeoutIds.pop() as ReturnType<typeof setTimeout>);
-        }
-        mediaPlayerEvent(eventName, el, conf);
-        setPercentageBoundTimeouts(el, conf);
-      }
-    },
-  };
-
-  const eventHandlers: Record<string, Function> = {};
-  conf.captureEvents.forEach((ev) => {
-    if (eventsWithOtherFunctions.hasOwnProperty(ev)) {
-      eventHandlers[ev] = (e: string, el: HTMLAudioElement | HTMLVideoElement, conf: TrackingOptions, event: Event) =>
-        eventsWithOtherFunctions[ev](e, el, conf, event);
-    } else {
-      eventHandlers[ev] = (e: string, el: HTMLAudioElement | HTMLVideoElement, conf: TrackingOptions) =>
-        mediaPlayerEvent(e, el, conf);
-    }
-  });
-
-  trackedIds[args.id] = { waitTime: 250, retryCount: 5, tracking: false };
-  setUpListeners(args.id, conf, eventHandlers);
-}
-
-function setUpListeners(id: string, conf: TrackingOptions, eventHandlers: Record<string, Function>) {
-  // The element may not be loaded in time for this function to run, so we have a few goes at finding the element
-  const result = findMediaElem(id);
-
-  if (!trackedIds[id].retryCount) {
-    LOG.error(result.err || SEARCH_ERROR.NOT_FOUND);
-    return;
-  }
-
-  if (!result.el) {
-    trackedIds[id].retryCount--;
-    trackedIds[id].timeoutId = setTimeout(() => setUpListeners(id, conf, eventHandlers), trackedIds[id].waitTime);
-    trackedIds[id].waitTime *= 2;
-    return;
-  }
-
-  clearTimeout(trackedIds[id].timeoutId as ReturnType<typeof setTimeout>);
-
-  if (!trackedIds[id].tracking) {
-    if (conf.captureEvents.indexOf(SnowplowEvent.PERCENTPROGRESS) !== 0) {
-      boundaryErrorHandling(conf.progress!.boundaries);
-      setPercentageBoundTimeouts(result.el, conf);
-    }
-    addCaptureEventListeners(result.el, conf, eventHandlers);
-    trackedIds[id].tracking = true;
-  }
-}
-
-function addCaptureEventListeners(
-  el: HTMLAudioElement | HTMLVideoElement,
-  conf: TrackingOptions,
-  eventHandlers: Record<string, Function>
-): void {
-  if (conf.captureEvents.indexOf(SnowplowEvent.READY) !== -1) {
-    mediaPlayerEvent(SnowplowEvent.READY, el, conf);
-  }
-  conf.captureEvents.forEach((e) => {
-    if (isType(e, TextTrackEvent)) {
-      // IE10 doesn't support addEventListener for TextTrack objects
-      if (el.textTracks.hasOwnProperty('addEventListener')) {
-        el.textTracks.addEventListener(e, () => eventHandlers[e](e, el, conf));
-      }
-    } else if (isType(e, DocumentEvent)) {
-      // The event emitted by the listener is needed for fullscreen tracking, as on exiting fullscreen
-      // document.fullscreenElement is null. The id is needed to check if the event should be tracked
-      ['MSFullscreenChange', 'fullscreenchange'].forEach((p: string) => {
-        document.addEventListener(p, () => eventHandlers[e](e, el, conf));
-      });
-    } else {
-      el.addEventListener(e, () => eventHandlers[e](e, el, conf));
-    }
-  });
-}
-
-function mediaPlayerEvent(
-  e: string,
-  el: HTMLAudioElement | HTMLVideoElement,
-  conf: TrackingOptions,
-  detail?: EventDetail
-): void {
-  const event = buildMediaEvent(e, el, conf, detail);
-  if (conf.captureEvents.indexOf(SnowplowEvent.PERCENTPROGRESS) !== -1) {
-    progressHandler(e, el, conf);
-  }
-
-  // Dragging the volume scrubber will generate a lot of events, this limits the rate at which
-  // volume events can be sent at
-  if (e === MediaEvent.VOLUMECHANGE) {
-    clearTimeout(conf.volume!.eventTimeoutId as ReturnType<typeof setTimeout>);
-    conf.volume!.eventTimeoutId = setTimeout(() => trackMediaEvent(event), conf.volume!.trackingInterval);
-  } else {
-    trackMediaEvent(event);
-  }
-}
-
-function trackMediaEvent(
-  event: SelfDescribingJson<MediaPlayerEvent> & CommonEventProperties,
-  trackers: Array<string> = Object.keys(_trackers)
-): void {
-  dispatchToTrackersInCollection(trackers, _trackers, (t) => {
-    t.core.track(buildSelfDescribingEvent({ event }), event.context, event.timestamp);
-  });
-}
-
-// Progress Tracking
-
-function progressHandler(e: string, el: HTMLAudioElement | HTMLVideoElement, conf: TrackingOptions) {
-  // If the event is a pause event, we need to clear any existing progress timeouts, and set them again on play
-  if (e === MediaEvent.PAUSE) {
-    while (conf.progress!.boundaryTimeoutIds.length) {
-      clearTimeout(conf.progress!.boundaryTimeoutIds.pop() as ReturnType<typeof setTimeout>);
-    }
-  }
-  if (e === MediaEvent.PLAY && (el as HTMLAudioElement | HTMLVideoElement).readyState > 0) {
-    setPercentageBoundTimeouts(el as HTMLAudioElement | HTMLVideoElement, conf);
-  }
-}
-
-function setPercentageBoundTimeouts(el: HTMLAudioElement | HTMLVideoElement, conf: TrackingOptions) {
-  conf.progress!.boundaries.forEach((boundary) => {
-    const absoluteBoundaryTimeMs = el.duration * (boundary / 100) * 1000;
-    const timeUntilBoundaryEvent = absoluteBoundaryTimeMs - el.currentTime * 1000;
-    // If the boundary is less than the current time, we don't need to bother setting it
-    if (0 < timeUntilBoundaryEvent) {
-      conf.progress!.boundaryTimeoutIds.push(
-        setTimeout(
-          () => waitAnyRemainingTimeAfterTimeout(el, absoluteBoundaryTimeMs, boundary, conf),
-          timeUntilBoundaryEvent
-        )
-      );
-    }
-  });
-}
-
-// The timeout in setPercentageBoundTimeouts fires ~100 - 300ms early
-// waitAnyRemainingTimeAfterTimeout ensures the event is fired accurately
-
-function waitAnyRemainingTimeAfterTimeout(
-  el: HTMLAudioElement | HTMLVideoElement,
-  absoluteBoundaryTimeMs: number,
-  boundary: number,
-  conf: TrackingOptions
-) {
-  if (el.currentTime * 1000 < absoluteBoundaryTimeMs) {
-    setTimeout(() => {
-      waitAnyRemainingTimeAfterTimeout(el, absoluteBoundaryTimeMs, boundary, conf);
-    }, 10);
-  } else {
-    mediaPlayerEvent(SnowplowEvent.PERCENTPROGRESS, el, conf, { boundary: boundary });
-  }
-}
+export * from './api';
diff --git a/plugins/browser-plugin-media-tracking/src/mediaEvents.ts b/plugins/browser-plugin-media-tracking/src/mediaEvents.ts
deleted file mode 100644
index cc951fca6..000000000
--- a/plugins/browser-plugin-media-tracking/src/mediaEvents.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events
-
-export const MediaEvent = {
-  ABORT: 'abort',
-  CANPLAY: 'canplay',
-  CANPLAYTHROUGH: 'canplaythrough',
-  DURATIONCHANGE: 'durationchange',
-  EMPTIED: 'emptied',
-  ENDED: 'ended',
-  ERROR: 'error',
-  LOADEDMETADATA: 'loadedmetadata',
-  LOADSTART: 'loadstart',
-  PAUSE: 'pause',
-  PLAY: 'play',
-  PLAYING: 'playing',
-  PROGRESS: 'progress',
-  RATECHANGE: 'ratechange',
-  RESIZE: 'resize',
-  SEEKED: 'seeked',
-  SEEKING: 'seeking',
-  STALLED: 'stalled',
-  SUSPEND: 'suspend',
-  TIMEUPDATE: 'timeupdate',
-  VOLUMECHANGE: 'volumechange',
-  WAITING: 'waiting',
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement#events
-
-export const VideoEvent = {
-  ENTERPICTUREINPICTURE: 'enterpictureinpicture',
-  LEAVEPICTUREINPICTURE: 'leavepictureinpicture',
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/TextTrack#events
-export const TextTrackEvent = {
-  CHANGE: 'change',
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenchange_event
-export const DocumentEvent = {
-  FULLSCREENCHANGE: 'fullscreenchange',
-};
-
-export const SnowplowEvent = {
-  PERCENTPROGRESS: 'percentprogress',
-  READY: 'ready',
-};
diff --git a/plugins/browser-plugin-media-tracking/src/player.ts b/plugins/browser-plugin-media-tracking/src/player.ts
new file mode 100644
index 000000000..da1dfe0f9
--- /dev/null
+++ b/plugins/browser-plugin-media-tracking/src/player.ts
@@ -0,0 +1,147 @@
+import {
+  startMediaTracking,
+  trackMediaPlay,
+  trackMediaPause,
+  trackMediaEnd,
+  trackMediaSeekEnd,
+  trackMediaPlaybackRateChange,
+  trackMediaVolumeChange,
+  trackMediaFullscreenChange,
+  trackMediaPictureInPictureChange,
+  trackMediaBufferStart,
+  trackMediaBufferEnd,
+  trackMediaError,
+  updateMediaTracking,
+  trackMediaReady,
+} from '@snowplow/browser-plugin-media';
+import { MediaPlayerUpdate, MediaType } from '@snowplow/browser-plugin-media/src/types';
+import { ElementConfig } from './config';
+import { getDuration, isFullScreen, isHtmlVideoElement, parseVolume } from './helperFunctions';
+import { buildHTMLMediaElementEntity, buildHTMLVideoElementEntity } from './entities';
+import { SelfDescribingJson } from '@snowplow/tracker-core';
+
+type CommonMediaPlayerUpdate = Omit<MediaPlayerUpdate, 'fullscreen' | 'pictureInPicture' | 'quality'>;
+type VideoMediaPlayerUpdate = Pick<MediaPlayerUpdate, 'fullscreen' | 'pictureInPicture'>;
+
+function updatePlayer(el: HTMLMediaElement): MediaPlayerUpdate {
+  const common: CommonMediaPlayerUpdate = {
+    currentTime: el.currentTime || 0,
+    duration: getDuration(el),
+    ended: el.ended,
+    livestream: el.duration === Infinity,
+    loop: el.loop,
+    mediaType: isHtmlVideoElement(el) ? MediaType.Video : MediaType.Audio,
+    muted: el.muted,
+    paused: el.paused,
+    volume: parseVolume(el.volume),
+    playbackRate: el.playbackRate,
+  };
+
+  const video: VideoMediaPlayerUpdate =
+    el instanceof HTMLVideoElement
+      ? {
+          fullscreen: isFullScreen(el),
+          pictureInPicture: document.pictureInPictureElement === el,
+        }
+      : {};
+
+  return { ...common, ...video };
+}
+
+function htmlContext(el: HTMLMediaElement): (() => SelfDescribingJson)[] {
+  const context = [() => buildHTMLMediaElementEntity(el)];
+
+  if (el instanceof HTMLVideoElement) {
+    context.push(() => buildHTMLVideoElementEntity(el));
+  }
+
+  return context;
+}
+
+export function setUpListeners(config: ElementConfig) {
+  const { id, video } = config;
+
+  startMediaTracking({
+    ...config,
+    id,
+    player: updatePlayer(video),
+    context: (config.context ?? []).concat(htmlContext(video)),
+  });
+
+  // If metadata is already loaded, we can track the ready event immediately
+  if (video.readyState > 0) {
+    trackMediaReady({ id, player: updatePlayer(video) });
+  } else {
+    video.addEventListener('loadedmetadata', () => {
+      trackMediaReady({ id, player: updatePlayer(video) });
+    });
+  }
+
+  addVideoEventListeners(video, id);
+}
+
+function addVideoEventListeners(video: HTMLMediaElement, id: string) {
+  let isWaiting = false;
+
+  video.addEventListener('play', () => trackMediaPlay({ id, player: updatePlayer(video) }));
+
+  video.addEventListener('pause', () => trackMediaPause({ id, player: updatePlayer(video) }));
+
+  video.addEventListener('ended', () => trackMediaEnd({ id, player: updatePlayer(video) }));
+
+  video.addEventListener('seeked', () => trackMediaSeekEnd({ id, player: updatePlayer(video) }));
+
+  video.addEventListener('ratechange', () =>
+    trackMediaPlaybackRateChange({ id, player: updatePlayer(video), newRate: video.playbackRate })
+  );
+
+  video.addEventListener('volumechange', () => {
+    trackMediaVolumeChange({ id, player: updatePlayer(video), newVolume: parseVolume(video.volume) });
+  });
+
+  video.addEventListener('fullscreenchange', () => {
+    trackMediaFullscreenChange({
+      id,
+      player: updatePlayer(video),
+      fullscreen: document.fullscreenElement === video,
+    });
+  });
+
+  video.addEventListener('enterpictureinpicture', () => {
+    trackMediaPictureInPictureChange({
+      id,
+      player: updatePlayer(video),
+      pictureInPicture: true,
+    });
+  });
+
+  video.addEventListener('leavepictureinpicture', () => {
+    trackMediaPictureInPictureChange({
+      id,
+      player: updatePlayer(video),
+      pictureInPicture: false,
+    });
+  });
+
+  video.addEventListener('waiting', () => {
+    trackMediaBufferStart({ id, player: updatePlayer(video) });
+    isWaiting = true;
+  });
+
+  // `playing` is also triggered by playing the video after pausing,
+  // so we need to check if the video was waiting before tracking the buffer
+  video.addEventListener('playing', () => {
+    if (isWaiting) {
+      trackMediaBufferEnd({ id, player: updatePlayer(video) });
+      isWaiting = false;
+    }
+  });
+
+  video.addEventListener('error', () => {
+    trackMediaError({ id, player: updatePlayer(video) });
+  });
+
+  video.addEventListener('timeupdate', () => {
+    updateMediaTracking({ id, player: updatePlayer(video) });
+  });
+}
diff --git a/plugins/browser-plugin-media-tracking/src/types.ts b/plugins/browser-plugin-media-tracking/src/types.ts
index eb64556c0..d8a1395c5 100644
--- a/plugins/browser-plugin-media-tracking/src/types.ts
+++ b/plugins/browser-plugin-media-tracking/src/types.ts
@@ -1,46 +1,4 @@
-import { MediaElement, MediaPlayer, MediaPlayerEvent, VideoElement } from './contexts';
-import { MediaEvent, TextTrackEvent, DocumentEvent, VideoEvent, SnowplowEvent } from './mediaEvents';
-
-export type PlayerEvent =
-  | keyof typeof MediaEvent
-  | keyof typeof TextTrackEvent
-  | keyof typeof DocumentEvent
-  | keyof typeof VideoEvent
-  | keyof typeof SnowplowEvent;
-
-export type EventGroup = (PlayerEvent | string)[];
-
-export interface MediaTrackingOptions {
-  boundaries?: number[];
-  captureEvents?: EventGroup;
-  label?: string;
-  volumeChangeTrackingInterval?: number;
-}
-
-export interface TrackingOptions {
-  id: string;
-  captureEvents: EventGroup;
-  label?: string;
-  progress?: {
-    boundaries: number[];
-    boundaryTimeoutIds: ReturnType<typeof setTimeout>[];
-  };
-  volume?: {
-    eventTimeoutId?: ReturnType<typeof setTimeout>;
-    trackingInterval: number;
-  };
-}
-
-export interface MediaEventData {
-  schema: string;
-  data: MediaPlayerEvent;
-  context: MediaEntities[];
-}
-
-export interface MediaEntities {
-  schema: string;
-  data: MediaElement | VideoElement | MediaPlayer;
-}
+import { SEARCH_ERROR } from './constants';
 
 export interface TextTrack {
   label: string;
@@ -58,15 +16,158 @@ export interface TrackedElement {
 
 export interface SearchResult {
   el?: HTMLAudioElement | HTMLVideoElement;
-  err?: string;
-}
-
-export interface SearchError {
-  NOT_FOUND: string;
-  MULTIPLE_ELEMENTS: string;
-  PLYR_CURRENTSRC: string;
+  err?: SEARCH_ERROR;
 }
 
 export interface EventDetail {
   boundary?: number;
 }
+interface TimeRange {
+  start: number;
+  end: number;
+}
+export interface MediaEntities {
+  schema: string;
+  data: MediaElement | VideoElement;
+}
+
+export interface VideoElement {
+  /**
+   * A boolean value that is true if the video should enter or leave picture-in-picture mode automatically when changing tab and/or application
+   **/
+  autoPictureInPicture?: boolean | null;
+
+  /**
+   * The disablePictureInPicture property will hint the user agent to not suggest the picture-in-picture to users or to request it automatically
+   **/
+  disablePictureInPicture?: boolean | null;
+
+  /**
+   * 'poster' HTML attribute, which specifies an image to show while no video data is available
+   **/
+  poster?: string | null;
+
+  /**
+   * A value indicating the intrinsic height of the resource in CSS pixels, or 0 if no media is available yet
+   **/
+  videoHeight: number;
+
+  /**
+   * A value indicating the intrinsic width of the resource in CSS pixels, or 0 if no media is available yet
+   **/
+  videoWidth: number;
+  [key: string]: unknown;
+}
+
+export interface MediaElement {
+  /**
+   * If playback should automatically begin as soon as enough media is available to do so without interruption
+   **/
+  autoPlay: boolean;
+
+  /**
+   * An array of time ranges that have been buffered
+   **/
+  buffered: TimeRange[];
+
+  /**
+   * If the user agent should provide it's own set of controls
+   **/
+  controls: boolean;
+
+  /**
+   * CORS settings value of the media player
+   **/
+  crossOrigin?: string | null;
+
+  /**
+   * The absolute URL of the media resource
+   **/
+  currentSrc: string;
+
+  /**
+   * If audio is muted by default
+   **/
+  defaultMuted: boolean;
+
+  /**
+   * The default media playback rate of the player
+   **/
+  defaultPlaybackRate: number;
+
+  /**
+   * If the media element is allowed to have a remote playback UI
+   **/
+  disableRemotePlayback?: boolean | null;
+
+  /**
+   * An object of the latest error to occur, or null if no errors
+   **/
+  error?: object | null;
+
+  /**
+   * The media file format
+   **/
+  fileExtension: string | null;
+
+  /**
+   * If the video element is fullscreen
+   **/
+  fullscreen?: boolean | null;
+
+  /**
+   * If the media is a video element, or audio
+   **/
+  mediaType: 'AUDIO' | 'VIDEO';
+
+  /**
+   * The current state of the fetching of media over the network
+   **/
+  networkState: 'NETWORK_EMPTY' | 'NETWORK_IDLE' | 'NETWORK_LOADING' | 'NETWORK_NO_SOURCE';
+
+  /**
+   * If the video element is showing Picture-In-Picture
+   **/
+  pictureInPicture?: boolean | null;
+
+  /**
+   * An array of time ranges played
+   **/
+  played?: TimeRange[];
+
+  /**
+   * The HTML id of the element
+   **/
+  htmlId: string;
+
+  /**
+   * The 'preload' HTML attribute of the media
+   **/
+  preload: string;
+
+  /**
+   * The readiness of the media
+   **/
+  readyState: 'HAVE_NOTHING' | 'HAVE_METADATA' | 'HAVE_CURRENT_DATA' | 'HAVE_FUTURE_DATA' | 'HAVE_ENOUGH_DATA';
+
+  /**
+   * Seekable time range(s)
+   **/
+  seekable: TimeRange[];
+
+  /**
+   * If the media is in the process of seeking to a new position
+   **/
+  seeking: boolean;
+
+  /**
+   * The 'src' HTML attribute of the media element
+   **/
+  src: string;
+
+  /**
+   * An array of TextTrack objects on the media element
+   **/
+  textTracks?: TextTrack[];
+  [key: string]: unknown;
+}
diff --git a/plugins/browser-plugin-media-tracking/test/media.test.ts b/plugins/browser-plugin-media-tracking/tests/media.test.ts
similarity index 50%
rename from plugins/browser-plugin-media-tracking/test/media.test.ts
rename to plugins/browser-plugin-media-tracking/tests/media.test.ts
index 884773bca..8d1f2fe9e 100644
--- a/plugins/browser-plugin-media-tracking/test/media.test.ts
+++ b/plugins/browser-plugin-media-tracking/tests/media.test.ts
@@ -1,186 +1,44 @@
-/*
- * Copyright (c) 2022 Snowplow Analytics Ltd, 2010 Anthon Pang
- * All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *
- * 1. Redistributions of source code must retain the above copyright notice, this
- *    list of conditions and the following disclaimer.
- *
- * 2. Redistributions in binary form must reproduce the above copyright notice,
- *    this list of conditions and the following disclaimer in the documentation
- *    and/or other materials provided with the distribution.
- *
- * 3. Neither the name of the copyright holder nor the names of its
- *    contributors may be used to endorse or promote products derived from
- *    this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
- * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
- * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
- * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
- * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
- * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-import { AllEvents, DefaultEvents } from '../src/eventGroups';
-import { findMediaElem } from '../src/findMediaElement';
-import {
-  boundaryErrorHandling,
-  dataUrlHandler,
-  getDuration,
-  getUriFileExtension,
-  trackingOptionsParser,
-} from '../src/helperFunctions';
-import { MediaTrackingOptions, TrackingOptions } from '../src/types';
-
-describe('config parser', () => {
-  const id = 'html5';
-
-  const default_output: TrackingOptions = {
-    id: 'html5',
-    captureEvents: DefaultEvents,
-    progress: {
-      boundaries: [10, 25, 50, 75],
-      boundaryTimeoutIds: [],
-    },
-    volume: {
-      trackingInterval: 250,
-    },
-  };
-
-  it('assigns defaults', () => {
-    const test = trackingOptionsParser(id);
-    expect(test).toEqual(default_output);
-  });
-
-  it('parses boundries', () => {
-    const trackingOptions: MediaTrackingOptions = {
-      captureEvents: DefaultEvents,
-      boundaries: [1, 4, 7, 9, 99],
-    };
-    const expected_output = [1, 4, 7, 9, 99];
-    expect(trackingOptionsParser(id, trackingOptions).progress?.boundaries).toEqual(expected_output);
-  });
-
-  it('parses mediaLabel', () => {
-    const trackingOptions: MediaTrackingOptions = {
-      label: 'test-label',
-    };
-    const expected_output = 'test-label';
-    expect(trackingOptionsParser(id, trackingOptions).label).toEqual(expected_output);
-  });
-
-  it('parses capture events', () => {
-    const trackingOptions: MediaTrackingOptions = {
-      captureEvents: ['play', 'pause'],
-    };
-    const expected_output = ['play', 'pause'];
-    expect(trackingOptionsParser(id, trackingOptions).captureEvents).toEqual(expected_output);
-  });
-
-  it('parses capture event groups', () => {
-    const trackingOptions: MediaTrackingOptions = {
-      captureEvents: ['AllEvents'],
-    };
-    const expected_output = AllEvents;
-    expect(trackingOptionsParser(id, trackingOptions).captureEvents).toEqual(expected_output);
-  });
-
-  it('parses capture events and groups in same array', () => {
-    const trackingOptions: MediaTrackingOptions = {
-      captureEvents: ['DefaultEvents', 'resize'],
-    };
-    const expected_output = DefaultEvents.concat(['resize']);
-    expect(trackingOptionsParser(id, trackingOptions).captureEvents).toEqual(expected_output);
-  });
-
-  it('parses volume timeout', () => {
-    const trackingOptions: MediaTrackingOptions = {
-      captureEvents: ['volumechange'],
-      volumeChangeTrackingInterval: 1000,
-    };
-    expect(trackingOptionsParser(id, trackingOptions).volume?.trackingInterval).toEqual(1000);
-  });
-});
-
-describe('boundry error handling', () => {
-  it("doesn't modify an acceptable boundry array", () => {
-    const boundries = [1, 50, 99];
-    const result = boundaryErrorHandling(boundries);
-    expect(result).toEqual(boundries);
-  });
-
-  it('removes values outside 1-99', () => {
-    const boundries = [0, 50, 100];
-    const result = boundaryErrorHandling(boundries);
-    expect(result).toEqual([50]);
-  });
-
-  it('removes duplicates', () => {
-    const boundries = [10, 10, 50, 90, 90];
-    const result = boundaryErrorHandling(boundries);
-    expect(result).toEqual([10, 50, 90]);
-  });
-
-  it('removes values outside 1-99 and removes duplicates', () => {
-    const boundries = [0, 0, 1, 1, 50, 100, 100];
-    const result = boundaryErrorHandling(boundries);
-    expect(result).toEqual([1, 50]);
-  });
-});
+import { findMediaElement } from '../src/findElem';
+import { dataUrlHandler, getDuration, getUriFileExtension } from '../src/helperFunctions';
 
 describe('element searcher', () => {
-  let consoleSpy: jest.SpyInstance;
-
-  beforeEach(() => {
-    consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-  });
-
-  afterEach(() => {
-    consoleSpy.mockRestore();
-  });
-
   it('finds a video with id', () => {
     document.body.innerHTML = '<div><video id="videoElem" src="test.mp4"</video></div>';
-    const output = findMediaElem('videoElem');
+    const output = findMediaElement('videoElem');
+    expect(output.el);
     expect(output.el?.tagName).toBe('VIDEO');
     expect(output.el?.id).toBe('videoElem');
   });
 
   it("returns error if the element doesn't have the id", () => {
     document.body.innerHTML = '<div><video src="test.mp4"</video></div>';
-    const output = findMediaElem('videoElem');
+    const output = findMediaElement('videoElem');
     expect(output).toStrictEqual({ err: 'Media element not found' });
   });
 
   it('finds a child video element in parent with id', () => {
     document.body.innerHTML = '<div id="parentElem"><video></video></div>';
-    const output = findMediaElem('parentElem');
+    debugger;
+    const output = findMediaElement('parentElem');
     expect(output.el?.tagName).toBe('VIDEO');
   });
 
   it('returns an error if multiple child audio elements exist in a parent', () => {
     document.body.innerHTML = '<div id="parentElem"><audio></audio><audio></audio></div>';
-    const output = findMediaElem('parentElem');
+    const output = findMediaElement('parentElem');
     expect(output).toStrictEqual({ err: 'More than one media element in the provided node' });
   });
 
   it('returns the first video element if exactly two exist in the same parent. Covers the cover-video case.', () => {
     document.body.innerHTML = '<div id="parentElem"><video id="test-id"></video><video></video></div>';
-    const output = findMediaElem('parentElem');
+    const output = findMediaElement('parentElem');
     expect(output.el?.tagName).toBe('VIDEO');
     expect(output.el?.id).toBe('test-id');
   });
 
   it('returns an error if multiple child video elements exist in a parent', () => {
     document.body.innerHTML = '<div id="parentElem"><video></video><video></video><video></video></div>';
-    const output = findMediaElem('parentElem');
+    const output = findMediaElement('parentElem');
     expect(output).toStrictEqual({ err: 'More than one media element in the provided node' });
   });
 });
diff --git a/plugins/browser-plugin-media-tracking/tests/test.test.ts b/plugins/browser-plugin-media-tracking/tests/test.test.ts
new file mode 100644
index 000000000..9176fe1ee
--- /dev/null
+++ b/plugins/browser-plugin-media-tracking/tests/test.test.ts
@@ -0,0 +1,314 @@
+import { addTracker, SharedState } from '@snowplow/browser-tracker-core';
+import { waitForElement } from '../src/findElem';
+import { PayloadBuilder, SelfDescribingJson } from '@snowplow/tracker-core';
+import { MediaEventType, SnowplowMediaPlugin, endMediaTracking } from '@snowplow/browser-plugin-media';
+import { startHtml5MediaTracking, MediaTrackingPlugin } from '../src';
+
+describe('waitForElement', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should call callback when element is added to the DOM', async () => {
+    const callback = jest.fn();
+
+    const stringConfig = {
+      id: 'test',
+      video: 'video',
+      captureEvents: [],
+      context: undefined,
+      timestamp: undefined,
+    };
+
+    waitForElement(stringConfig, callback);
+
+    const element = document.createElement('video');
+    element.id = 'video';
+    document.body.appendChild(element);
+
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(callback).toHaveBeenCalledWith({
+      context: undefined,
+      timestamp: undefined,
+      id: 'test',
+      video: element,
+      captureEvents: [],
+    });
+  });
+});
+
+describe('MediaTrackingPlugin', () => {
+  window.fetch = jest.fn();
+
+  let idx = 1;
+  let id = '';
+  let eventQueue: { event: SelfDescribingJson; context: SelfDescribingJson[] }[] = [];
+
+  beforeEach(() => {
+    addTracker(`sp${idx++}`, `sp${idx++}`, 'js-3.9.0', '', new SharedState(), {
+      stateStorageStrategy: 'cookie',
+      encodeBase64: false,
+      plugins: [
+        SnowplowMediaPlugin(),
+        MediaTrackingPlugin(),
+        {
+          beforeTrack: (pb: PayloadBuilder) => {
+            const { ue_pr, co, tna } = pb.build();
+            if (tna == `sp${idx - 1}`) {
+              eventQueue.push({ event: JSON.parse(ue_pr as string).data, context: JSON.parse(co as string).data });
+            }
+          },
+        },
+      ],
+      contexts: { webPage: false },
+    });
+    id = `media-${idx}`;
+  });
+
+  afterEach(() => {
+    endMediaTracking({ id });
+    eventQueue = [];
+  });
+
+  const htmlMediaEvents = [
+    'abort',
+    'canplay',
+    'canplaythrough',
+    'durationchange',
+    'emptied',
+    'ended',
+    'error',
+    'loadeddata',
+    'loadedmetadata',
+    'loadstart',
+    'pause',
+    'play',
+    'playing',
+    'progress',
+    'ratechange',
+    'seeked',
+    'seeking',
+    'stalled',
+    'suspend',
+    'timeupdate',
+    'volumechange',
+    'waiting',
+  ];
+
+  for (const event of htmlMediaEvents) {
+    Object.defineProperty(global.window.HTMLMediaElement.prototype, event, {
+      get() {
+        return () => this.dispatchEvent(new Event(event));
+      },
+    });
+  }
+
+  it(`tracks: Play`, async () => {
+    const video = document.createElement('video');
+    video.id = id;
+    document.body.appendChild(video);
+
+    startHtml5MediaTracking({ id: 'id', video, captureEvents: [MediaEventType.Play] });
+
+    video.play();
+
+    expect(eventQueue[0].event).toEqual({
+      schema: `iglu:com.snowplowanalytics.snowplow.media/play_event/jsonschema/1-0-0`,
+      data: {},
+    });
+  });
+
+  it(`tracks: Pause`, async () => {
+    const video = document.createElement('video');
+    video.id = id;
+    document.body.appendChild(video);
+
+    startHtml5MediaTracking({ id: 'id', video, captureEvents: [MediaEventType.Pause] });
+
+    video.pause();
+
+    expect(eventQueue[0].event).toEqual({
+      schema: `iglu:com.snowplowanalytics.snowplow.media/pause_event/jsonschema/1-0-0`,
+      data: {},
+    });
+  });
+
+  it('tracks: End', async () => {
+    const video = document.createElement('video');
+    video.id = id;
+    document.body.appendChild(video);
+
+    startHtml5MediaTracking({ id: 'id', video, captureEvents: [MediaEventType.End] });
+
+    video.dispatchEvent(new Event('ended'));
+
+    expect(eventQueue[0].event).toEqual({
+      schema: `iglu:com.snowplowanalytics.snowplow.media/end_event/jsonschema/1-0-0`,
+      data: {},
+    });
+  });
+
+  it('tracks: SeekEnd', () => {
+    const video = document.createElement('video');
+    video.id = id;
+    document.body.appendChild(video);
+
+    startHtml5MediaTracking({
+      id: 'id',
+      video,
+      captureEvents: [MediaEventType.SeekEnd],
+      filterOutRepeatedEvents: false,
+    });
+
+    video.dispatchEvent(new Event('seeked'));
+
+    expect(eventQueue.pop()!.event).toEqual({
+      schema: `iglu:com.snowplowanalytics.snowplow.media/seek_end_event/jsonschema/1-0-0`,
+      data: {},
+    });
+  });
+
+  it('tracks: PlaybackRateChange', () => {
+    const video = document.createElement('video');
+    video.id = id;
+    document.body.appendChild(video);
+
+    startHtml5MediaTracking({ id: 'id', video, captureEvents: [MediaEventType.PlaybackRateChange] });
+
+    video.playbackRate = 2;
+
+    expect(eventQueue[0].event).toEqual({
+      schema: `iglu:com.snowplowanalytics.snowplow.media/playback_rate_change_event/jsonschema/1-0-0`,
+      data: {
+        newRate: 2,
+        previousRate: 1,
+      },
+    });
+  });
+
+  it('tracks: VolumeChange', () => {
+    const video = document.createElement('video');
+    video.id = id;
+    document.body.appendChild(video);
+
+    startHtml5MediaTracking({
+      id: 'id',
+      video,
+      captureEvents: [MediaEventType.VolumeChange],
+      filterOutRepeatedEvents: false,
+    });
+
+    video.volume = 0.1;
+
+    expect(eventQueue[0].event).toEqual({
+      schema: `iglu:com.snowplowanalytics.snowplow.media/volume_change_event/jsonschema/1-0-0`,
+      data: {
+        newVolume: 10,
+        previousVolume: 100,
+      },
+    });
+  });
+
+  // Can't set fullscreen element in JSDOM, so `fullscreen` will be always `false`
+  it('tracks: FullscreenChange', () => {
+    const video = document.createElement('video');
+    video.id = id;
+    document.body.appendChild(video);
+
+    startHtml5MediaTracking({ id: 'id', video, captureEvents: [MediaEventType.FullscreenChange] });
+
+    video.dispatchEvent(new Event('fullscreenchange'));
+
+    expect(eventQueue[0].event).toEqual({
+      schema: `iglu:com.snowplowanalytics.snowplow.media/fullscreen_change_event/jsonschema/1-0-0`,
+      data: {
+        fullscreen: false,
+      },
+    });
+  });
+
+  it('tracks: PictureInPictureChange', () => {
+    const video = document.createElement('video');
+    video.id = id;
+    document.body.appendChild(video);
+
+    startHtml5MediaTracking({ id: 'id', video, captureEvents: [MediaEventType.PictureInPictureChange] });
+
+    video.dispatchEvent(new Event('enterpictureinpicture'));
+
+    expect(eventQueue.pop()!.event).toEqual({
+      schema: `iglu:com.snowplowanalytics.snowplow.media/picture_in_picture_change_event/jsonschema/1-0-0`,
+      data: {
+        pictureInPicture: true,
+      },
+    });
+
+    video.dispatchEvent(new Event('leavepictureinpicture'));
+
+    expect(eventQueue.pop()!.event).toEqual({
+      schema: `iglu:com.snowplowanalytics.snowplow.media/picture_in_picture_change_event/jsonschema/1-0-0`,
+      data: {
+        pictureInPicture: false,
+      },
+    });
+  });
+
+  it('tracks: BufferStart', () => {
+    const video = document.createElement('video');
+    video.id = id;
+    document.body.appendChild(video);
+
+    startHtml5MediaTracking({ id: 'id', video, captureEvents: [MediaEventType.BufferStart] });
+
+    video.dispatchEvent(new Event('waiting'));
+
+    expect(eventQueue[0].event).toEqual({
+      schema: `iglu:com.snowplowanalytics.snowplow.media/buffer_start_event/jsonschema/1-0-0`,
+      data: {},
+    });
+  });
+
+  it('tracks: BufferEnd', () => {
+    const video = document.createElement('video');
+    video.id = id;
+    document.body.appendChild(video);
+
+    startHtml5MediaTracking({ id: 'id', video, captureEvents: [MediaEventType.BufferStart, MediaEventType.BufferEnd] });
+
+    video.dispatchEvent(new Event('waiting'));
+    video.dispatchEvent(new Event('playing'));
+
+    expect(eventQueue.pop()!.event).toEqual({
+      schema: `iglu:com.snowplowanalytics.snowplow.media/buffer_end_event/jsonschema/1-0-0`,
+      data: {},
+    });
+  });
+
+  it('tracks: Error', () => {
+    const video = document.createElement('video');
+    video.id = id;
+    document.body.appendChild(video);
+
+    startHtml5MediaTracking({ id: 'id', video, captureEvents: [MediaEventType.Error] });
+
+    video.dispatchEvent(new Event('error'));
+
+    expect(eventQueue[0].event).toEqual({
+      schema: `iglu:com.snowplowanalytics.snowplow.media/error_event/jsonschema/1-0-0`,
+      data: {},
+    });
+  });
+
+  it("doesn't track BufferEnd if 'waiting' not fired first ", () => {
+    const video = document.createElement('video');
+    video.id = id;
+    document.body.appendChild(video);
+
+    startHtml5MediaTracking({ id: 'id', video, captureEvents: [MediaEventType.BufferStart, MediaEventType.BufferEnd] });
+
+    video.dispatchEvent(new Event('playing'));
+
+    expect(eventQueue.length).toBe(0);
+  });
+});
diff --git a/plugins/browser-plugin-media/src/api.ts b/plugins/browser-plugin-media/src/api.ts
index 7ac81e8c1..15c55b810 100644
--- a/plugins/browser-plugin-media/src/api.ts
+++ b/plugins/browser-plugin-media/src/api.ts
@@ -1,5 +1,5 @@
 import { BrowserPlugin, BrowserTracker, dispatchToTrackersInCollection } from '@snowplow/browser-tracker-core';
-import { buildSelfDescribingEvent, LOG, SelfDescribingJson } from '@snowplow/tracker-core';
+import { buildSelfDescribingEvent, resolveDynamicContext, LOG, SelfDescribingJson } from '@snowplow/tracker-core';
 import { MediaTracking } from './mediaTracking';
 import { MediaPingInterval } from './pingInterval';
 import { MediaSessionTracking } from './sessionTracking';
@@ -716,7 +716,11 @@ function track(
 
   const trackEvent = (event: EventWithContext) => {
     dispatchToTrackersInCollection(trackers, _trackers, (t) => {
-      t.core.track(buildSelfDescribingEvent(event), (event.context ?? []).concat(context), timestamp);
+      t.core.track(
+        buildSelfDescribingEvent(event),
+        (event.context ?? []).concat(resolveDynamicContext(context)),
+        timestamp
+      );
     });
   };
 
diff --git a/plugins/browser-plugin-media/src/mediaTracking.ts b/plugins/browser-plugin-media/src/mediaTracking.ts
index e60a5f81f..00c4270f3 100644
--- a/plugins/browser-plugin-media/src/mediaTracking.ts
+++ b/plugins/browser-plugin-media/src/mediaTracking.ts
@@ -1,4 +1,4 @@
-import { LOG, SelfDescribingJson } from '@snowplow/tracker-core';
+import { resolveDynamicContext, DynamicContext, LOG, SelfDescribingJson } from '@snowplow/tracker-core';
 import { MediaAdTracking } from './adTracking';
 import { buildMediaPlayerEntity, buildMediaPlayerEvent } from './core';
 import { MediaPingInterval } from './pingInterval';
@@ -43,7 +43,7 @@ export class MediaTracking {
   /// Manages ad entities.
   private adTracking = new MediaAdTracking();
   /// Context entities to attach to all events
-  private customContext?: Array<SelfDescribingJson>;
+  private customContext?: DynamicContext;
   /// Optional list of event types to allow tracking and discard others.
   private captureEvents?: MediaEventType[];
   // Whether to update page activity when playing media. Enabled by default.
@@ -60,7 +60,7 @@ export class MediaTracking {
     captureEvents?: MediaEventType[],
     updatePageActivityWhilePlaying?: boolean,
     filterRepeatedEvents?: FilterOutRepeatedEvents,
-    context?: Array<SelfDescribingJson>
+    context?: DynamicContext
   ) {
     this.id = id;
     this.updatePlayer(player);
@@ -118,7 +118,7 @@ export class MediaTracking {
       context.push(this.session.getContext());
     }
     if (this.customContext) {
-      context = context.concat(this.customContext);
+      context = context.concat(resolveDynamicContext(this.customContext, mediaEvent ?? customEvent));
     }
     context = context.concat(this.adTracking.getContext());
 
diff --git a/plugins/browser-plugin-media/src/types.ts b/plugins/browser-plugin-media/src/types.ts
index dda74a041..d4825930f 100644
--- a/plugins/browser-plugin-media/src/types.ts
+++ b/plugins/browser-plugin-media/src/types.ts
@@ -1,4 +1,4 @@
-import { CommonEventProperties, SelfDescribingJson } from '@snowplow/tracker-core';
+import { CommonEventProperties, DynamicContext, SelfDescribingJson } from '@snowplow/tracker-core';
 
 /** Type of media player event */
 export enum MediaEventType {
@@ -407,9 +407,9 @@ export interface MediaPlayerAdBreakUpdate {
   podSize?: number;
 }
 
-export interface CommonMediaEventProperties extends CommonEventProperties {
+export interface CommonMediaEventProperties extends Omit<CommonEventProperties, 'context'> {
   /** Add context entities to an event by setting an Array of Self Describing JSON */
-  context?: Array<SelfDescribingJson>;
+  context?: DynamicContext;
 }
 
 export interface EventWithContext extends CommonEventProperties {
diff --git a/trackers/javascript-tracker/test/media/media.test.ts b/trackers/javascript-tracker/test/media/media.test.ts
index dd57f12d9..557a4f6e6 100644
--- a/trackers/javascript-tracker/test/media/media.test.ts
+++ b/trackers/javascript-tracker/test/media/media.test.ts
@@ -2,6 +2,7 @@ import _ from 'lodash';
 import { fetchResults } from '../micro';
 import { pageSetup, waitUntil } from '../integration/helpers';
 import { Capabilities } from '@wdio/types';
+import { MediaEventType } from '@snowplow/browser-plugin-media';
 
 const playVideoElement1Callback = () => {
   return (done: (_: void) => void) => {
@@ -25,134 +26,94 @@ const playVideoElement2Callback = () => {
   };
 };
 
-const makeExpectedEvent = (
-  eventType: string,
-  values: { mediaPlayer?: any; mediaElement?: any; videoElement?: any },
-  htmlId = 'html5'
-) => {
+const mediaElementContext = (htmlId: string): any => {
   const data = {
-    context: [
-      {
-        schema: 'iglu:org.whatwg/media_element/jsonschema/1-0-0',
-        data: {
-          htmlId: htmlId,
-          mediaType: 'VIDEO',
-          autoPlay: false,
-          buffered: jasmine.any(Array),
-          controls: true,
-          currentSrc: jasmine.stringMatching(
-            /http\:\/\/snowplow-js-tracker\.local\:8080\/media\/(test-video\.mp4|not-a-video\.unsupported_format)/
-          ),
-          defaultMuted: true,
-          defaultPlaybackRate: 1,
-          disableRemotePlayback: undefined,
-          error: null,
-          networkState: jasmine.stringMatching(/NETWORK_(EMPTY|IDLE|LOADING|NO_SOURCE)/),
-          preload: jasmine.stringMatching(/auto|metadata|none||/),
-          readyState: jasmine.stringMatching(/HAVE_(NOTHING|METADATA|CURRENT_DATA|FUTURE_DATA|ENOUGH_DATA)/),
-          seekable: jasmine.any(Array),
-          seeking: false,
-          src: jasmine.stringMatching(
-            /http\:\/\/snowplow-js-tracker\.local\:8080\/media\/(test-video\.mp4|not-a-video\.unsupported_format)/
-          ),
-          textTracks: [
-            {
-              label: 'English',
-              language: 'en',
-              kind: 'captions',
-              mode: jasmine.stringMatching(/showing|hidden|disabled|/),
-            },
-          ],
-          fileExtension: jasmine.stringMatching(/mp4|unsupported_format/),
-          fullscreen: false,
-          pictureInPicture: false,
-          ...values.mediaElement,
-        },
-      },
-      {
-        schema: 'iglu:com.snowplowanalytics.snowplow/media_player/jsonschema/1-0-0',
-        data: {
-          currentTime: jasmine.any(Number),
-          ended: false,
-          loop: false,
-          muted: true,
-          paused: false,
-          playbackRate: 1,
-          volume: 100,
-          ...values.mediaPlayer,
-        },
-      },
-      {
-        schema: 'iglu:org.whatwg/video_element/jsonschema/1-0-0',
-        data: {
-          autoPictureInPicture: undefined,
-          disablePictureInPicture: undefined,
-          poster: '',
-          videoHeight: 144,
-          videoWidth: 176,
-          ...values.videoElement,
+    schema: 'iglu:org.whatwg/media_element/jsonschema/1-0-0',
+    data: {
+      htmlId: htmlId,
+      mediaType: 'VIDEO',
+      autoPlay: false,
+      buffered: jasmine.any(Array),
+      controls: true,
+      currentSrc: jasmine.stringMatching(
+        /http\:\/\/snowplow-js-tracker\.local\:8080\/media\/(test-video\.mp4|not-a-video\.unsupported_format)/
+      ),
+      defaultMuted: true,
+      defaultPlaybackRate: 1,
+      disableRemotePlayback: undefined,
+      error: null,
+      networkState: jasmine.stringMatching(/NETWORK_(EMPTY|IDLE|LOADING|NO_SOURCE)/),
+      preload: jasmine.stringMatching(/auto|metadata|none||/),
+      readyState: jasmine.stringMatching(/HAVE_(NOTHING|METADATA|CURRENT_DATA|FUTURE_DATA|ENOUGH_DATA)/),
+      seekable: jasmine.any(Array),
+      seeking: false,
+      src: jasmine.stringMatching(
+        /http\:\/\/snowplow-js-tracker\.local\:8080\/media\/(test-video\.mp4|not-a-video\.unsupported_format)/
+      ),
+      textTracks: [
+        {
+          label: 'English',
+          language: 'en',
+          kind: 'captions',
+          mode: jasmine.stringMatching(/showing|hidden|disabled|/),
         },
-      },
-    ],
-    unstruct_event: {
-      schema: 'iglu:com.snowplowanalytics.snowplow/unstruct_event/jsonschema/1-0-0',
-      data: {
-        schema: 'iglu:com.snowplowanalytics.snowplow/media_player_event/jsonschema/1-0-0',
-        data: { type: eventType, label: 'test-label' },
-      },
+      ],
+      fileExtension: jasmine.stringMatching(/mp4|unsupported_format/),
+      fullscreen: false,
+      pictureInPicture: false,
     },
   };
 
   const browserName = 'browserName' in browser.capabilities && browser.capabilities.browserName;
   if (browserName === 'internet explorer') {
-    data.context[0].data.defaultMuted = false;
+    data.data.defaultMuted = false;
   }
 
   return data;
 };
 
-const compare = (expected: any, received: any) => {
-  if (received === undefined) {
-    expect(received).toBeDefined();
-    return;
+const compareMediaElementContext = (expected: any, received: any) => {
+  const keys = Object.keys(mediaElementContext('').data);
+  for (const key of keys) {
+    expect(expected[key]).toEqual(received[key]);
   }
-  for (let i = 0; i < expected.context.length; i++) {
-    expect(expected.context[i].schema).toEqual(received.event.contexts.data[i].schema);
-    Object.keys(expected.context[i].data).forEach((key) => {
-      // jasmine doesn't have an 'or' matcher and the error state of 'loadstart' is very inconsistent
-      // so we put the potential values in an array and check if the received value is in the array
-      // However, we want to check the 'textTracks' property with toEqual, so that needs to be excluded
-      if (
-        expected.unstruct_event.data.data.type === 'loadstart' &&
-        Array.isArray(expected.context[i].data[key]) &&
-        key !== 'textTracks'
-      ) {
-        expect(expected.context[i].data[key]).toContain(received.event.contexts.data[i].data[key]);
-      } else {
-        expect(expected.context[i].data[key]).toEqual(received.event.contexts.data[i].data[key]);
-      }
-    });
+};
+
+const videoElementContext = () => {
+  return {
+    schema: 'iglu:org.whatwg/video_element/jsonschema/1-0-0',
+    data: {
+      autoPictureInPicture: undefined,
+      disablePictureInPicture: undefined,
+      poster: '',
+      videoHeight: 144,
+      videoWidth: 176,
+    },
+  };
+};
+
+const compareVideoElementContext = (expected: any, received: any) => {
+  const keys = Object.keys(videoElementContext().data);
+  for (const key of keys) {
+    expect(expected[key]).toEqual(received[key]);
   }
-  expect(expected.unstruct_event).toEqual(received.event.unstruct_event);
+};
+
+const expectedUnstructEvent = (mediaEventType: string, data: object = {}) => {
+  return {
+    schema: 'iglu:com.snowplowanalytics.snowplow/unstruct_event/jsonschema/1-0-0',
+    data: {
+      schema: `iglu:com.snowplowanalytics.snowplow.media/${mediaEventType}_event/jsonschema/1-0-0`,
+      data,
+    },
+  };
 };
 
 describe('Media Tracking', () => {
   let log: Array<unknown> = [];
   let testIdentifier = '';
 
-  describe('Media Tracker - Default Events', () => {
-    const getFirstEventOfEventType = (eventType: string) => {
-      for (let i = log.length - 1; i >= 0; i--) {
-        const currentEvent = log[i] as any;
-        if (
-          currentEvent.event?.unstruct_event?.data.data.type === eventType &&
-          currentEvent.event?.app_id === 'media-default-events-' + testIdentifier
-        ) {
-          return log[i];
-        }
-      }
-    };
-
+  describe('Media Tracker', () => {
     const capabilities = browser.capabilities as Capabilities.DesiredCapabilities;
     if (
       capabilities.browserName === 'internet explorer' &&
@@ -209,8 +170,7 @@ describe('Media Tracking', () => {
             let log = await fetchResults();
             return log.some(
               (l: any) =>
-                l.event?.unstruct_event?.data.data.type === 'ended' &&
-                l.event?.app_id === 'media-default-events-' + testIdentifier
+                l.schema?.includes('end_event') && l.event?.app_id === 'media-default-events-' + testIdentifier
             );
           });
         },
@@ -225,32 +185,51 @@ describe('Media Tracking', () => {
     });
 
     const expected = {
-      ready: {
-        mediaPlayer: { paused: true },
-        videoElement: { videoHeight: jasmine.any(Number), videoWidth: jasmine.any(Number) },
-      },
-      play: { mediaPlayer: { duration: 20 } },
-      pause: { mediaPlayer: { paused: true } },
-      volumechange: { mediaPlayer: { paused: true, volume: 50 } },
-      ratechange: { mediaPlayer: { paused: true, volume: 50, playbackRate: 0.9 } },
-      seeked: { mediaPlayer: { paused: true, volume: 50, playbackRate: 0.9 } },
-      percentprogress: { mediaPlayer: { volume: 50, playbackRate: jasmine.any(Number) } },
-      ended: {
-        mediaPlayer: { volume: 50, playbackRate: jasmine.any(Number), paused: jasmine.any(Boolean), ended: true },
-      },
+      [MediaEventType.Ready]: {},
+      [MediaEventType.Play]: {},
+      [MediaEventType.Pause]: {},
+      [MediaEventType.VolumeChange]: { previousVolume: 100, newVolume: 50 },
+      [MediaEventType.PlaybackRateChange]: { previousRate: 1, newRate: 0.9 },
+      [MediaEventType.SeekEnd]: {},
+      [MediaEventType.PercentProgress]: { percentProgress: 95 },
+      [MediaEventType.End]: {},
+    };
+
+    const getEventByEventType = (mediaEventType: string): any => {
+      for (const event of log) {
+        if (
+          (event as any).schema === `iglu:com.snowplowanalytics.snowplow.media/${mediaEventType}_event/jsonschema/1-0-0`
+        )
+          return event;
+      }
     };
 
-    Object.entries(expected).forEach(([name, properties]) => {
+    Object.entries(expected).forEach(([name, data]) => {
       it('tracks ' + name, () => {
-        const expected = makeExpectedEvent(name, properties);
-        const received = getFirstEventOfEventType(name);
-        compare(expected, received);
+        const expected_unstruct_event = expectedUnstructEvent(name, data);
+        const expected_video_element = videoElementContext();
+        const expected_media_element = mediaElementContext('html5');
+
+        const received: any = getEventByEventType(name);
+
+        expect(expected_unstruct_event).toEqual(received.event.unstruct_event);
+
+        const received_media_element_context = received.event.contexts.data.find(
+          (schema_data: any) => schema_data.schema === 'iglu:org.whatwg/media_element/jsonschema/1-0-0'
+        );
+        compareMediaElementContext(expected_media_element, received_media_element_context);
+
+        const received_video_element_context = received.event.contexts.data.find(
+          (schema_data: any) => schema_data.schema === 'iglu:org.whatwg/video_element/jsonschema/1-0-0'
+        );
+        compareVideoElementContext(expected_video_element, received_video_element_context);
       });
     });
   });
 
   describe('Media Tracker (2 videos, 1 tracker)', () => {
     beforeAll(async () => {
+      testIdentifier = await pageSetup();
       await browser.url('/media/tracking-2-players.html');
 
       await waitUntil(browser, () => $('#html5').isExisting(), {
@@ -282,13 +261,13 @@ describe('Media Tracking', () => {
         async () => {
           return await browser.call(async () => {
             let log = await fetchResults();
-            return (
-              log.filter(
-                (l: any) =>
-                  l.event?.unstruct_event?.data.data.type === 'pause' &&
-                  l.event?.app_id === 'media-2-players-1-tracker-' + testIdentifier
-              ).length === 2
-            );
+            const filtered = log.filter((l: any) => {
+              return (
+                l.event?.event_name === 'pause_event' &&
+                l.event?.app_id === 'media-2-players-1-tracker-' + testIdentifier
+              );
+            });
+            return filtered.length === 2;
           });
         },
         {
@@ -301,29 +280,31 @@ describe('Media Tracking', () => {
       log = await browser.call(async () => await fetchResults());
     });
 
-    const getFirstEventOfEventTypeWithId = (eventType: string, id: string) => {
-      let results = log.filter(
-        (l: any) =>
-          l.event?.unstruct_event?.data.data.type === eventType &&
-          l.event.contexts.data[0].data.htmlId === id &&
+    const getFirstEventOfEventTypeWithId = (eventType: string, id: string): any => {
+      let results = log.filter((l: any) => {
+        return (
+          l.event?.event_name === eventType + '_event' &&
+          l.event.contexts.data[2].data.htmlId === id &&
           l.event.app_id === 'media-2-players-1-tracker-' + testIdentifier
-      );
+        );
+      });
       return results[results.length - 1];
     };
 
     it('tracks two players with a single tracker', () => {
-      const expectedOne = makeExpectedEvent('pause', { mediaPlayer: { paused: true } });
-      const receivedOne = getFirstEventOfEventTypeWithId('pause', 'html5');
-      compare(expectedOne, receivedOne);
+      const expectedUnstructEventOne = expectedUnstructEvent(MediaEventType.Pause);
+      const receivedOne = getFirstEventOfEventTypeWithId(MediaEventType.Pause, 'html5');
+      expect(expectedUnstructEventOne).toEqual(receivedOne.event.unstruct_event);
 
-      const expectedTwo = makeExpectedEvent('pause', { mediaPlayer: { paused: true } }, 'html5-2');
-      const receivedTwo = getFirstEventOfEventTypeWithId('pause', 'html5-2');
-      compare(expectedTwo, receivedTwo);
+      const expectedUnstructEventTwo = expectedUnstructEvent(MediaEventType.Pause);
+      const receivedTwo = getFirstEventOfEventTypeWithId(MediaEventType.Pause, 'html5-2');
+      expect(expectedUnstructEventTwo).toEqual(receivedTwo.event.unstruct_event);
     });
   });
 
   describe('Media Tracker (1 video, 2 trackers)', () => {
     beforeAll(async () => {
+      testIdentifier = await pageSetup();
       await browser.url('media/tracking-2-trackers.html');
 
       await waitUntil(browser, () => $('#html5').isExisting(), {
@@ -344,7 +325,7 @@ describe('Media Tracking', () => {
             return (
               log.filter(
                 (l: any) =>
-                  l.event?.unstruct_event?.data.data.type === 'pause' &&
+                  l.event?.event_name === 'pause_event' &&
                   l.event.app_id === 'media-1-player-2-trackers-' + testIdentifier
               ).length === 2
             );
@@ -360,180 +341,25 @@ describe('Media Tracking', () => {
       log = await browser.call(async () => await fetchResults());
     });
 
-    const getEventsOfEventType = (eventType: string, limit: number = 1): Array<any> => {
+    const getEventsOfEventType = (eventType: MediaEventType, limit: number = 1): Array<any> => {
       const results = log.filter(
         (l: any) =>
-          l.event?.unstruct_event?.data.data.type === eventType &&
+          l.event?.event_name === eventType + '_event' &&
           l.event.app_id === 'media-1-player-2-trackers-' + testIdentifier
       );
       return results.slice(results.length - limit);
     };
 
     it('tracks one player with two trackers', () => {
-      const expected = makeExpectedEvent('pause', { mediaPlayer: { paused: true } });
-      const result = getEventsOfEventType('pause', 2);
+      const expected = expectedUnstructEvent(MediaEventType.Pause);
+      const result = getEventsOfEventType(MediaEventType.Pause, 2);
+
+      expect(expected).toEqual(result[0].event.unstruct_event);
+      expect(expected).toEqual(result[1].event.unstruct_event);
 
-      compare(expected, result[0]);
-      compare(expected, result[1]);
       const tracker_names = result.map((r: any) => r.event.name_tracker);
       expect(tracker_names).toContain('sp1');
       expect(tracker_names).toContain('sp2');
     });
   });
-
-  describe('Media Tracker - All Events', () => {
-    beforeAll(async () => {
-      await browser.url('media/tracking-all-events.html');
-
-      await waitUntil(browser, () => $('#html5').isExisting(), {
-        timeout: 10000,
-        timeoutMsg: 'expected html5 after 5s',
-      });
-
-      const video_url = await browser.execute(() => {
-        return (document.getElementById('html5') as HTMLVideoElement).src;
-      });
-
-      let actions = [
-        playVideoElement1Callback(),
-        (done: () => void) => {
-          (document.getElementById('html5') as HTMLVideoElement).pause();
-          done();
-        },
-        (done: () => void) => {
-          (document.getElementById('html5') as HTMLVideoElement).currentTime = 18;
-          done();
-        },
-        playVideoElement1Callback(),
-        (done: () => void) => {
-          (document.getElementById('html5') as HTMLVideoElement).textTracks[0].mode = 'disabled';
-          done();
-        },
-        (done: () => void) => {
-          (document.getElementById('html5') as HTMLVideoElement).src = 'not-a-video.unsupported_format';
-          done();
-        },
-      ];
-
-      for (const a of actions) {
-        await browser.executeAsync(a);
-        await browser.pause(1000);
-      }
-
-      await browser.execute((video_url) => {
-        (document.getElementById('html5') as HTMLVideoElement).src = video_url;
-      }, video_url);
-
-      await waitUntil(
-        browser,
-        async () => {
-          return await browser.call(async () => {
-            let log = await fetchResults();
-            // Events can occur in any order, so we can't just check for the last event
-            // 40 - 45 events are expected, due to the timing of 'timeupdate' events
-            return log.length > 40;
-          });
-        },
-        {
-          interval: 2000,
-          timeout: 60000,
-          timeoutMsg: 'All events not found before timeout',
-        }
-      );
-
-      log = await browser.call(async () => await fetchResults());
-    });
-
-    const getFirstEventOfEventType = (eventType: string) => {
-      let results = log.filter(
-        (l: any) =>
-          l.event?.unstruct_event?.data.data.type === eventType &&
-          l.event.app_id === 'media-all-events-' + testIdentifier
-      );
-      return results[results.length - 1];
-    };
-
-    const expected = {
-      canplay: {
-        mediaPlayer: {
-          paused: true,
-        },
-      },
-      canplaythrough: {
-        mediaPlayer: {
-          paused: true,
-        },
-      },
-      timeupdate: {},
-      playing: {},
-      seeking: {
-        mediaElement: {
-          seeking: true,
-        },
-        mediaPlayer: {
-          paused: true,
-        },
-      },
-      error: {
-        mediaElement: {
-          networkState: 'NETWORK_NO_SOURCE',
-          readyState: 'HAVE_NOTHING',
-          currentSrc: 'http://snowplow-js-tracker.local:8080/media/not-a-video.unsupported_format',
-          src: 'http://snowplow-js-tracker.local:8080/media/not-a-video.unsupported_format',
-          error: jasmine.any(Object),
-        },
-        mediaPlayer: {
-          paused: true,
-        },
-        videoElement: {
-          videoHeight: 0,
-          videoWidth: 0,
-        },
-      },
-      loadstart: {
-        mediaElement: {
-          error: [jasmine.any(Object), null],
-        },
-        mediaPlayer: {
-          currentTime: 0,
-          paused: true,
-        },
-        videoElement: {
-          videoHeight: 0,
-          videoWidth: 0,
-        },
-      },
-      loadedmetadata: {
-        mediaPlayer: {
-          paused: true,
-        },
-      },
-      durationchange: {
-        mediaPlayer: {
-          paused: true,
-        },
-      },
-    };
-
-    Object.entries(expected).forEach(([name, properties]) => {
-      // I can't find a good way of triggering an error event for firefox 53 or chrome 60, so they can
-      // be skipped for now (events past 'error' are fired as a result of the error occouring)
-      const capabilities = browser.capabilities as Capabilities.DesiredCapabilities;
-      if (
-        (name === 'error' &&
-          capabilities.browserName === 'firefox' &&
-          capabilities.browserVersion === '53.0') ||
-        (capabilities.browserName === 'chrome' && capabilities.version === '60.0.3112.78')
-      ) {
-        fit('Skip events from error', () => {});
-        return;
-      } else {
-        it('tracks ' + name, () => {
-          const expected = makeExpectedEvent(name, properties);
-          const received = getFirstEventOfEventType(name);
-          compare(expected, received);
-        });
-      }
-    });
-  });
 });
diff --git a/trackers/javascript-tracker/test/pages/media/tracking-2-players.html b/trackers/javascript-tracker/test/pages/media/tracking-2-players.html
index 1341a8160..ebc9b5e31 100644
--- a/trackers/javascript-tracker/test/pages/media/tracking-2-players.html
+++ b/trackers/javascript-tracker/test/pages/media/tracking-2-players.html
@@ -32,15 +32,15 @@
         appId: 'media-2-players-1-tracker-' + testIdentifier,
       });
 
-      window.snowplow('enableMediaTracking', {
-        id: 'html5',
-        options: {
-          label: 'test-label',
-        },
+      window.snowplow('startHtml5MediaTracking', {
+        id: testIdentifier + '-1',
+        video: 'html5',
+        label: 'test-label',
       });
 
-      window.snowplow('enableMediaTracking', {
-        id: 'html5-2',
+      window.snowplow('startHtml5MediaTracking', {
+        id: testIdentifier + '-2',
+        video: 'html5-2',
         options: {
           label: 'test-label',
         },
diff --git a/trackers/javascript-tracker/test/pages/media/tracking-2-trackers.html b/trackers/javascript-tracker/test/pages/media/tracking-2-trackers.html
index 3a56b5646..777d09f9d 100644
--- a/trackers/javascript-tracker/test/pages/media/tracking-2-trackers.html
+++ b/trackers/javascript-tracker/test/pages/media/tracking-2-trackers.html
@@ -35,11 +35,10 @@
         appId: 'media-1-player-2-trackers-' + testIdentifier,
       });
 
-      window.snowplow('enableMediaTracking', {
-        id: 'html5',
-        options: {
-          label: 'test-label',
-        },
+      window.snowplow('startHtml5MediaTracking', {
+        id: testIdentifier,
+        video: 'html5',
+        label: 'test-label',
       });
     </script>
     <!--
diff --git a/trackers/javascript-tracker/test/pages/media/tracking-all-events.html b/trackers/javascript-tracker/test/pages/media/tracking-all-events.html
deleted file mode 100644
index 9b517e26f..000000000
--- a/trackers/javascript-tracker/test/pages/media/tracking-all-events.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Page for HTML5 media tracking testing with Snowplow Micro</title>
-    <script>
-      var collector_endpoint = document.cookie.split('container=')[1].split(';')[0].trim();
-      var testIdentifier = document.cookie.split('testIdentifier=')[1].split(';')[0].trim();
-      document.body.className += ' loaded';
-    </script>
-  </head>
-  <body>
-    <script>
-      (function (p, l, o, w, i, n, g) {
-        if (!p[i]) {
-          p.GlobalSnowplowNamespace = p.GlobalSnowplowNamespace || [];
-          p.GlobalSnowplowNamespace.push(i);
-          p[i] = function () {
-            (p[i].q = p[i].q || []).push(arguments);
-          };
-          p[i].q = p[i].q || [];
-          n = l.createElement(o);
-          g = l.getElementsByTagName(o)[0];
-          n.async = 1;
-          n.src = w;
-          g.parentNode.insertBefore(n, g);
-        }
-      })(window, document, 'script', '../snowplow.js', 'snowplow');
-
-      document.write(collector_endpoint);
-
-      window.snowplow('newTracker', 'sp2', collector_endpoint, {
-        appId: 'media-all-events-' + testIdentifier,
-      });
-
-      window.snowplow('enableMediaTracking', {
-        id: 'html5',
-        options: {
-          captureEvents: ['AllEvents'],
-          boundaries: [95],
-          label: 'test-label',
-        },
-      });
-    </script>
-    <!--
-        The element must be muted to avoid: 
-        javascript error: javascript error: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
-    -->
-    <video id="html5" src="./test-video.mp4" height="250px" width="250px" controls muted>
-      <track kind="captions" label="English" src="./test-track.vtt" srclang="en" default />
-    </video>
-  </body>
-</html>
diff --git a/trackers/javascript-tracker/test/pages/media/tracking.html b/trackers/javascript-tracker/test/pages/media/tracking.html
index 6883ccf7b..d4f1cb265 100644
--- a/trackers/javascript-tracker/test/pages/media/tracking.html
+++ b/trackers/javascript-tracker/test/pages/media/tracking.html
@@ -32,13 +32,11 @@
         appId: 'media-default-events-' + testIdentifier,
       });
 
-      window.snowplow('enableMediaTracking', {
-        id: 'html5',
-        options: {
-          captureEvents: ['DefaultEvents'],
-          boundaries: [95],
-          label: 'test-label',
-        },
+      window.snowplow('startHtml5MediaTracking', {
+        id: testIdentifier,
+        video: 'html5',
+        boundaries: [95],
+        label: 'test-label',
       });
     </script>
     <!--