See bundle size and imports for lightweight core/composable entries, fixed skins, and individual controls. Existing aggregate imports remain supported.
VideoPlayer
A complete on-demand player with a media adapter and packaged skin.
import { VideoPlayer } from 'videojs-vue'Props
For the upstream Compat skin, import VideoPlayer from videojs-vue/video/compat. It shares the API below, but its optional skin prop accepts only 'compat' and defaults to that value. The aggregate videojs-vue player continues to support only default and neutral skins. See Compat skin for examples and compatibility limits.
videojs-vue/video/legacy exports the same player contract with skin?: 'legacy'. It requires the standalone legacy CSS and Chrome 90 consumer build setup; its simplified skin does not implement thumbnail previews. See legacy mode.
All props are optional. Provide a media source to play video.
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | undefined | Media URL. |
poster | string | undefined | Poster URL, passed to the player and media. |
title | string | undefined | Player metadata title, mapped to content-title. |
media | VideoMediaComponent | Video | Media component; use HlsVideo for HLS. |
skin | 'default' | 'neutral' | 'default' | Packaged skin. |
autoplay | boolean | false | Request autoplay, subject to browser policy. |
loop | boolean | false | Repeat playback. |
playsinline | boolean | true | Request inline playback. |
preload | 'none' | 'metadata' | 'auto' | 'metadata' | Media preload hint. |
crossorigin | '' | 'anonymous' | 'use-credentials' | undefined | Media CORS mode. |
tracks | readonly MediaTrack[] | undefined | Text tracks; see MediaTrack. |
volume | number | undefined | Optional volume setting, clamped to 0–1. |
muted | boolean | undefined | Optional mute setting. |
playbackRate | number | undefined | Optional positive, finite playback rate. |
undefined settings leave the media setting under player control. Bind v-model:volume, v-model:muted, or v-model:playback-rate to receive confirmed updates; see two-way settings.
VideoPlayer forwards only the shared media props to its adapter. For HLS source configuration or additional media attributes, use PlayerRoot with HlsVideo.
Events
Emits ready(handle), update:volume(number), update:muted(boolean), update:playbackRate(number), and the forwarded media events.
ready indicates that the store is available. It does not indicate that the video is buffered or its metadata has loaded.
Slots
| Slot | Content |
|---|---|
poster | Custom poster content, assigned to the skin's poster slot. |
thumbnail | Custom thumbnail content, assigned to the skin's thumbnail slot. |
Named slot content is forwarded without slot props. VideoPlayer does not render a user-provided default slot or arbitrary controls/overlay slots. Use composition for those layouts.
Attributes and styling
Fallthrough attributes and listeners target the skin element, not the media or outer player element. Both skins default to display: block, width: 100%, and aspect-ratio: 16 / 9. Supplied styles can override these defaults.
See skins and styling for examples.
Exposed ref
The component exposes a PlayerHandle: player actions and live element, store, and media getters. These getters return null while the player is unavailable or inactive.