# How to programmatically detect video track quality changes on Web

This article describes how you can use the VideoTrack API, a sub-API of the MediaTrack API, to detect video track quality changes. Implementing this functionality is a common use-case for developers who want to build their own UI to visualize the video track quality that is currently active.

## Usage

Listen for the [`activequalitychanged`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v11/api-reference/web/interfaces/MediaTrackEventMap#activequalitychanged) event of a [`MediaTrack`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v11/api-reference/web/interfaces/MediaTrack).

```js
// detect video tracks being added to the player
player.videoTracks.addEventListener('addtrack', function (addTrackEvent) {
  // detect quality changes of a track
  addTrackEvent.track.addEventListener('activequalitychanged', function (event) {
    console.log('activequalitychanged event detected!', event);
  });
});
```

## Related articles

* [How to programmatically detect video track qualities](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/how-to-guides/web/media-tracks/detect-video-track-qualities.md)
* [How to programmatically select a video track quality](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/how-to-guides/web/media-tracks/select-video-track-quality.md)
* [How to programmatically detect audio track changes](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/how-to-guides/web/media-tracks/detect-audio-track-changes.md)
* [How to build a chromeless UI](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/how-to-guides/web/ui/build-chromeless-ui.md)