Video sources

Use one of these three ways to give the player its video.

Option	Use it when
`src`	You have one file.
`src-webm`, `src-mp4`, `src-ogg`	You have the same video in several formats and want the browser to pick.
`responsive-src`	You have the same video in several sizes. See Quality & responsive files.

A single file

1
<vega-player src="/video.mp4" poster="/poster.jpg"></vega-player>

Several formats

The browser plays the first format it supports, in this order: WebM, MP4, Ogg. If you change these attributes while a video is playing, the position and play state are kept.

1
<vega-player
2
  src-webm="/video.webm"
3
  src-mp4="/video.mp4"
4
  poster="/poster.jpg">
5
</vega-player>

If you also set src-*, they take priority over src.

Preloading

preload works like on <video>. The default is none: nothing is downloaded until the viewer presses play, which keeps pages with many players light.

Value	Behaviour
`none` (default)	Downloads nothing until play. The duration is unknown until then.
`metadata`	Downloads only the duration and dimensions. Needed to show the duration or seek preview before playing.
`auto`	Lets the browser buffer ahead.

Poster, loop, muted, autoplay

1
<vega-player src="/video.mp4" poster="/poster.jpg" loop muted autoplay></vega-player>

autoplay falls back to muted playback if the browser blocks sound. It only runs when the page loads (or when the autoplay attribute itself is added), never because another attribute changed.

Aspect ratio

aspect-ratio reserves the right space before the video loads, so the page doesn’t jump. Use any W:H or W/H value; the default is 16:9.

1
<vega-player src="/vertical.mp4" aspect-ratio="9:16"></vega-player>

When a video fails

If the video can’t load (missing file, network error, unsupported format) the player shows an error screen with a Retry button, which retries from the same position, and fires vega-player:error.

A missing file, on purpose.

1
<vega-player src="/missing.mp4" error-title="Video unavailable" error-retry-text="Try again"></vega-player>

Releasing memory after long pauses

After 2 minutes paused, the player unloads the video to free memory. The last frame (or the poster) stays on screen, nothing is released while the tab is hidden, and play() restores the source and the position automatically. Change the delay globally, or set it to 0 to turn it off:

1
import VegaPlayer from './vega-player.js';
2
VegaPlayer.RELEASE_DELAY = 0; // never release