Video.js Vue

Native video and captions ​

This player uses a public demo source. For source switching, settings, and event inspection, open the Playground.

Add captions ​

After installation, use the following component in your application. Serve demo.mp4, poster.webp, and captions.vtt from your public directory, or replace the URLs with your own assets.

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

<template>
  <VideoPlayer
    src="/demo.mp4"
    poster="/poster.webp"
    title="Demo"
    crossorigin="anonymous"
    :tracks="[
      {
        src: '/captions.vtt',
        kind: 'captions',
        srclang: 'en',
        label: 'English',
        default: true,
      },
    ]"
  />
</template>

Create public/captions.vtt with a cue that overlaps your video:

text
WEBVTT

00:00:00.000 --> 00:00:04.000
Welcome to the demo.

Start playback and select the English caption track in the player controls. The default flag marks it as a default candidate; the browser and user preferences determine the initial selection. Cross-origin media and tracks require compatible server CORS headers.

Customize the example ​

  • Change src to load another video using upstream source-change behavior.
  • Set skin="neutral" to try the other packaged skin.
  • Use the poster slot for custom poster content.
  • Use composition for a custom control layout.

See MediaTrack for track fields and events for playback notifications.