Methods & properties

1
const player = document.querySelector('vega-player');

Playback

Method	Description
`play()`	Starts playback. Falls back to muted if the browser blocks sound.
`pause()`	Pauses. May open the call-to-action modal.
`pause({ silent: true })`	Pauses without opening the modal (this pause only).
`stop()`	Pauses and rewinds to 0.
`setTime(seconds)`	Seeks, clamped between 0 and the duration.
`setPlaybackRate(rate)`	Sets the speed (0.25–2). Kept across quality changes.
`setQuality(src)`	Switches file keeping position, play/pause state and speed.

Volume

Method	Description
`setVolume(value)`	0 to 1. `0` also mutes.
`getVolume()`	Returns the current volume.

Display

Method	Description
`toggleFullscreen()`	Fullscreen on/off (native video fullscreen on iPhone).
`togglePictureInPicture()`	Async. Picture-in-Picture on/off.
`toggleCaptions()`	Shows/hides captions.
`toggleChromecast()`	Starts or ends a Cast session.

Member	Description
`showModal()`	Opens the modal and moves focus inside.
`hideModal()`	Closes it and restores focus.
`isModalVisible`	`true` while the modal is open (read-only in practice).

While casting, play(), pause(), setTime() and setVolume() act on the Cast device.

Properties

Every attribute is also a settable property in camelCase that reflects to the attribute:

1
player.src = '/video-720.mp4';
2
player.muted = true;            // boolean attributes take booleans
3
player.controlsVisible = false; // "true"/"false" attributes too
4
player.colorPrimary = '#ff6a2b';
5
player.qualities = [{ label: '720p', src: '/video-720.mp4' }]; // arrays are stored as JSON
6
player.poster = null;           // null/undefined/'' removes the attribute

Static settings

Set these on the class, before players are created:

1
import VegaPlayer from './vega-player.js';
2

3
VegaPlayer.RELEASE_DELAY = 120000; // ms paused before the video is unloaded (0 = never)
4
VegaPlayer.i18n = { ...VegaPlayer.i18n, play: 'Reproducir' }; // interface texts

See Translating the UI for every text key.