Video Player for Vue

A video plays above a control bar drawn in your theme's colours.

Use it for product demos, course videos and clips where the browser's own controls look out of place. A muted loop behind a hero needs no controls: a plain video element with autoplay, muted and loop does it. In Vue, the controls are Buttons and range inputs wired to the video's own events, so the browser still does the playing, the buffering and the captions.

Installation

Anatomy

VideoPlayer
├── VideoPlayerContent (video, with track children)
└── VideoPlayerControlBar
    ├── VideoPlayerSeekBackwardButton
    ├── VideoPlayerPlayButton
    ├── VideoPlayerSeekForwardButton
    ├── VideoPlayerTimeRange
    ├── VideoPlayerTimeDisplay
    ├── VideoPlayerCaptionsButton
    ├── VideoPlayerMuteButton
    └── VideoPlayerVolumeRange

Usage

<script setup lang="ts">
import {
  VideoPlayer, VideoPlayerContent, VideoPlayerControlBar,
  VideoPlayerMuteButton, VideoPlayerPlayButton, VideoPlayerTimeDisplay,
  VideoPlayerTimeRange, VideoPlayerVolumeRange,
} from "@/components/ui/video-player";
</script>

<template>
  <VideoPlayer class="max-w-2xl">
    <VideoPlayerContent poster="/intro.webp" src="/intro.mp4" />
    <VideoPlayerControlBar>
      <VideoPlayerPlayButton />
      <VideoPlayerTimeRange />
      <VideoPlayerTimeDisplay showDuration />
      <VideoPlayerMuteButton />
      <VideoPlayerVolumeRange />
    </VideoPlayerControlBar>
  </VideoPlayer>
</template>

Accessibility

Every button has a name that says what it does now (Play or Pause, Mute or Unmute), the captions button is a toggle (aria-pressed), and the two ranges are native range inputs named Seek and Volume, the seek bar reading its time as "1:04 of 3:12". A click on the video plays or pauses it, and the video takes focus too. The control bar stays left to right in right-to-left text, as media controls do: they follow the tape, not the reading direction. The shortcuts work while focus is anywhere inside the player; a focused button keeps Space and Enter, and a focused range keeps the arrows.

Demos

Seek

Seek buttons sit on both sides of play, here 15 seconds each way through seekOffset (10 by default). The time counts down with remaining. The video loads nothing until it's played (preload="none"), so the length shows as --:-- until then.

Captions

Captions are the video's own track children, drawn by the browser. default shows them from the start, and VideoPlayerCaptionsButton turns the first captions or subtitles track on and off. A track from another origin needs crossOrigin="anonymous" on the video and CORS on the file, as this one from MDN has.

Overlay

The control bar can float over the picture: absolute, translucent, and shown while the player is hovered, focused or paused (group-data-[state=paused]/video-player:). VideoPlayer sets data-state to playing or paused for styles like this one. Under reduced motion the bar appears without its fade.

Minimal

Pick only the parts you need: a play button and a seek bar, for a short muted loop in a square frame. Each part reads the player from context, so any of them can go anywhere inside VideoPlayer.

FAQ

API Reference