videojs-vue

videojs-vue

Vue 3 components and composables for Video.js 10, with video and audio players, packaged skins, reactive playback state, and optional HLS support.

Upgrading from the previous player API? See the breaking change migration guide for renamed APIs and video import paths.

Documentation · Playground

Installation

Requires Vue 3.5 or later.

pnpm add videojs-vue vue

Usage

<script setup lang="ts">
import { VideoPlayer } from 'videojs-vue/video/default'
</script>

<template>
  <VideoPlayer
    src="/demo.mp4"
    poster="/poster.webp"
    title="Demo"
  />
</template>

Serve your video and poster at the URLs above. Component registration and skin styles are included; no Vue isCustomElement configuration is needed.

To use the upstream Compat skin, change the import to videojs-vue/video/compat. This entry loads only that skin and keeps the same player API. It does not include polyfills or guarantee a lower minimum browser version; see Compat skin.

For Chrome 90+, use videojs-vue/video/legacy with videojs-vue/video/skins/legacy.css, opt-in videojs-vue/polyfills, and a consumer build targeting chrome90. See legacy mode for setup and validation limits.

core-js is an optional peer dependency. Install it with pnpm add core-js@^3.50.0 before importing videojs-vue/polyfills. Other entries do not require it. If your target browsers or application already provide Array.prototype.at and Object.hasOwn, omit both the polyfill import and the core-js installation, including when using the legacy skin.

See the documentation for HLS, custom controls, internationalization, and the API reference. Try the playground for interactive examples.

For multiple media items, the playlist recipe demonstrates continuous playback, whole-list repeat, and cancellable URL resolution with one player. The Playground includes a runnable playlist and both copyable source files.

Audio

<script setup lang="ts">
import { AudioPlayer } from 'videojs-vue/audio/default'
</script>

<template>
  <AudioPlayer
    src="/episode.mp3"
    title="Episode one"
  />
</template>

The fixed audio entry loads only the default audio skin. Use videojs-vue/audio when switching between both skins at runtime. Lightweight core, composables, and individual control entries are also available; see bundle size and imports. See the audio API.

HLS Live

Use the independent live preset with the optional HLS adapter:

<script setup lang="ts">
import { LiveVideoPlayer } from 'videojs-vue/live'
import { HlsVideo } from 'videojs-vue/media/hls'
</script>

<template>
  <LiveVideoPlayer
    :media="HlsVideo"
    src="/live.m3u8"
  />
</template>

Install @videojs/hlsjs-video@10.0.1 separately. The live preset provides default and neutral skins, live-state composables, and a return-to-live button. See the live API and HLS Live example. A dedicated DVR timeline is outside this initial live release.

Credits

Built on Video.js, which provides the player, media adapters, and controls. Thanks to the Video.js contributors.

License

MIT