videojs-v10-html-player-store

name	videojs-v10-html-player-store
description	Reference for the Video.js HTML player's `<video-player>` custom element store API — state signals, actions (play/pause/seek/volume/fullscreen/pip/subtitles), lifecycle methods (attach/detach/destroy), feature presets, and feed unload/reload patterns. Activate whenever writing or debugging Video.js player code that accesses `player.store`.

Video.js HTML Player — Store API Reference

Further Reference

• Docs: https://videojs.org/docs/framework/react/how-to/installation
• Source: https://github.com/videojs/v10/

If you need details not covered here, clone the repo:

git clone https://github.com/videojs/v10/

All state and actions are accessible on the <video-player> element's store:

const player = document.querySelector('video-player');
player.store.state.paused;     // read state
player.store.state.play();     // call action

Store Lifecycle Methods

These live directly on store (not store.state):

Method	Description
store.target	{ media, container } or null
store.destroyed	Whether the store has been permanently destroyed
store.attach({ media, container })	Attach store to a media/container target; triggers all feature attach() callbacks
store.detach()	Reset all signals + state to initial values; keeps store alive for reuse
store.destroy()	Permanently destroy the store (aborts setup, detaches, no reuse)
store.subscribe(callback, options?)	Subscribe to state changes; returns unsubscribe function

detach() vs destroy():

• detach() — unload source, keep player. Use when reusing the element with a new source.
• destroy() — permanent teardown. Call player.destroy() on the element to cascade destroy through engines (hls.js/dash.js MSE teardown, blob URL revocation, event listeners).

---

Playback

player.store.state.paused       // boolean
player.store.state.ended        // boolean
player.store.state.started      // boolean (played or seeked ever)
player.store.state.waiting      // boolean (stalled for data)

player.store.state.play()           // Promise<void>
player.store.state.pause()          // void
player.store.state.togglePaused()   // boolean — returns true if now playing

---

Source

player.store.state.source      // string | null (currentSrc || src)
player.store.state.canPlay     // boolean (readyState >= HAVE_ENOUGH_DATA)

player.store.state.loadSource('https://...')   // string — sets media.src + media.load()

Unload without destroying:

player.store.state.loadSource('');

---

Time

player.store.state.currentTime     // number (seconds)
player.store.state.duration        // number (seconds; 0 if unknown)
player.store.state.seeking         // boolean

player.store.state.seek(42)        // Promise<number> — seeks to time, returns actual position

seek() waits for loadedmetadata if no metadata yet, then seeked. In-flight seeks are auto-cancelled on new source load.

---

Volume

player.store.state.volume                // 0–1
player.store.state.muted                 // boolean
player.store.state.volumeAvailability    // 'available' | 'unavailable' | 'unsupported'

player.store.state.setVolume(0.5)        // number — clamped 0–1, auto-unmutes if > 0
player.store.state.toggleMuted()         // boolean — returns new muted state

---

Playback Rate

player.store.state.playbackRates        // readonly number[] — e.g. [0.2, 0.5, 0.7, 1, 1.2, 1.5, 1.7, 2]
player.store.state.playbackRate          // number

player.store.state.setPlaybackRate(1.5)  // void

---

Buffer

player.store.state.buffered       // [start, end][] — e.g. [[0, 30.5], [35, 60]]
player.store.state.seekable       // [start, end][] — seekable ranges

---

Fullscreen

player.store.state.fullscreen                // boolean
player.store.state.fullscreenAvailability    // 'available' | 'unavailable' | 'unsupported'

player.store.state.requestFullscreen()       // Promise<void> — exits PiP first if needed
player.store.state.exitFullscreen()          // Promise<void>
player.store.state.toggleFullscreen()        // Promise<void>

---

Picture-in-Picture

player.store.state.pip                   // boolean
player.store.state.pipAvailability       // 'available' | 'unavailable' | 'unsupported'

player.store.state.requestPictureInPicture()     // Promise<void> — exits fullscreen first if needed
player.store.state.exitPictureInPicture()        // Promise<void>
player.store.state.togglePictureInPicture()      // Promise<void>

---

Remote Playback (AirPlay / Chromecast)

player.store.state.remotePlaybackState         // 'disconnected' | 'connecting' | 'connected'
player.store.state.remotePlaybackAvailability  // 'available' | 'unavailable' | 'unsupported'

player.store.state.toggleRemotePlayback()      // Promise<void>

---

Controls Visibility

player.store.state.userActive         // boolean — user recently interacted
player.store.state.controlsVisible    // boolean — shown if userActive || paused || casting

player.store.state.toggleControls()   // boolean — returns new controlsVisible

Controls auto-hide after 2s of inactivity (on pointermove, keyup, focusin).

---

Error

player.store.state.error            // { code: number, message: string } | null

player.store.state.dismissError()   // void — clears error to null

Auto-reset on emptied (new source).

---

Text Tracks (Captions / Chapters / Thumbnails)

player.store.state.chaptersCues       // { startTime, endTime, text }[]
player.store.state.thumbnailCues      // { startTime, endTime, text }[]
player.store.state.thumbnailTrackSrc  // string | null — <track> src for resolving relative URLs
player.store.state.textTrackList      // { kind, label, language, mode }[]
player.store.state.subtitlesShowing   // boolean

player.store.state.toggleSubtitles(forceShow?)  // boolean — returns new showing state

---

Live (live presets only)

player.store.state.liveEdgeStart       // number — NaN if not live
player.store.state.targetLiveWindow    // number — 0 (low latency), Infinity (DVR), NaN (VOD)

---

Feature Presets

Not all state is available on every player build. Features depend on the preset:

Preset	Features
videoFeatures	playback, source, time, volume, playbackRate, buffer, fullscreen, pip, remotePlayback, controls, textTrack, error
audioFeatures	playback, source, time, volume, playbackRate, buffer, error
liveVideoFeatures	playback, source, time, volume, buffer, fullscreen, pip, remotePlayback, controls, textTrack, error, live
liveAudioFeatures	playback, source, time, volume, buffer, error, live
backgroundFeatures	(empty — no features, lightweight)

The CDN video.js bundle uses videoFeatures.

---

Feed Unload/Reload Pattern

const player = document.querySelector('#feed video-player');
const video = player.querySelector('video');

// Unload (release memory, keep DOM)
video.removeAttribute('src');
video.load();
// or: player.store.state.loadSource('');

// Reload
video.src = 'https://example.com/new-video.mp4';
video.load();
// or: player.store.state.loadSource('https://example.com/new-video.mp4');

// Full destroy (remove from feed, never reuse)
player.destroy();
player.remove();