Skip to content
Vega PlayerVega PlayerVega Player

Quality & responsive files

Quality menu

Section titled “Quality menu”

Give qualities a JSON array of { label, src }. A menu appears in the control bar.

<vega-player
  src="/video-720.mp4"
  qualities='[
    {"label": "1080p", "src": "/video-1080.mp4"},
    {"label": "720p",  "src": "/video-720.mp4"},
    {"label": "360p",  "src": "/video-360.mp4"}
  ]'>
</vega-player>
Switch quality while it plays: position, play state and speed are kept.

When the viewer picks a quality:

  • the position, the play/pause state and the speed are kept;
  • a spinner shows while the new file loads;
  • vega-player:qualitychange fires, or vega-player:source-switch-error if it fails.

From JavaScript:

player.setQuality('/video-1080.mp4');

Responsive files

Section titled “Responsive files”

responsive-src picks the file that best fits the player’s own width and the screen density, like srcset does for images. Small players and low-density screens download lighter files.

<vega-player
  src="/video-1080.mp4"
  responsive-src='[
    {"maxWidth": 640,  "src": "/video-360.mp4",  "label": "360p"},
    {"maxWidth": 1280, "src": "/video-720.mp4",  "label": "720p"},
    {"src": "/video-1080.mp4", "label": "1080p"}
  ]'>
</vega-player>

How it chooses

Section titled “How it chooses”
  1. It measures the player width in CSS pixels and multiplies it by the device pixel ratio (capped at 2).
  2. It takes the first entry whose maxWidth (in physical pixels) is larger than that number.
  3. If none fits, it uses the entry without maxWidth, and if there isn’t one, the largest.

The choice is made once, when the player loads, so resizing the window never triggers a second download. vega-player:responsive-src reports what was picked.