Skip to main content

VidStack

Less than 1 minute

Embed VidStackopen in new window in Markdown files.

Install vidstack@1 package in your project first to use this component:

pnpm
pnpm add -D vidstack@1

Demo

A video player
<VidStack src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />
A video player with poster, thumbnail, chapter and tracks
<VidStack
  src="https://media-files.vidstack.io/720p.mp4"
  title="Agent 327 Operation Barber Shop"
  poster="https://media-files.vidstack.io/poster-2.png"
  :sourses="[
    {
      src: 'https://media-files.vidstack.io/720p.mp4',
      type: 'video/mp4',
    },
    {
      src:  'https://media-files.vidstack.io/720p.avi',
      type: 'video/avi',
    },
    {
      src:  'https://media-files.vidstack.io/720p.ogv',
      type: 'video/ogg',
    },
  ]"
  :tracks="[
    {
      src: 'https://media-files.vidstack.io/subs/english.vtt',
      label: 'English',
      language: 'en-US',
      kind: 'subtitles',
      default: true,
    },
    {
      src: 'https://media-files.vidstack.io/subs/spanish.vtt',
      label: 'Spanish',
      language: 'es-ES',
      kind: 'subtitles',
    },
    // Chapters
    {
      src: 'https://media-files.vidstack.io/chapters.vtt',
      kind: 'chapters',
      language: 'en-US',
      default: true,
    },
  ]"
  thumbnails="https://media-files.vidstack.io/thumbnails.vtt"
  crossorigin
/>
An audio player
<VidStack src="//theme-hope-assets.vuejs.press/files/sample.mp3" title="VidStack Audio Demo" />
YouTube player
<VidStack
  src="youtube/_cMxraX_5RE"
  title="VidStack YouTube Demo"
/>

Props

src

  • Type: string
  • Required: No

Video source link.

sources

  • Type: VidStackSource[]

    interface VidStackSource {
      src: string;
      type: string;
    }
    
  • Required: No

Detailed audio/video source with type.

title

  • Type: string
  • Required: No

Audio/Video title

poster

  • Type: string
  • Required: No

Video poster (not working with audio)

alt

  • Type: string
  • Default: poster

Video poster alt (not working with audio)

thumbnails

  • Type: string
  • Required: No

Video thumbnails (not working with audio)

aspect-ratio

  • Type: ${number}/${number}
  • Required: No

Video aspect ratio (not working with audio). E.g.: 16/9