Vidstack

Run and edit this code in your browser on Stackblitz. Open external link

There’s a few options to choose from when getting started with Vidstack. Follow any of the links below that makes the most sense with your current setup:

• NPM + HTML
• NPM + React
• CDN + HTML

​​ HTML

1. Install the package:

npm i vidstack

2. Import styles and custom elements:

import "vidstack/styles/base.css";
// the following styles are optional - remove to go headless.
import "vidstack/styles/ui/buttons.css";
import "vidstack/styles/ui/sliders.css";

import { defineCustomElements } from "vidstack/elements";

defineCustomElements();

3. Add player markup:

<vds-media
  controls
  poster="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/thumbnails/thumbnail.jpg"
  view="video"
>
  <vds-hls-video>
    <video
      src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.m3u8"
      preload="none"
    ></video>
  </vds-hls-video>
</vds-media>

You’re all setup! You can refer to the Vidstack documentation Open external link to continue getting started.

​​ React

1. Install packages:

npm i vidstack @vidstack/react

2. Setup player:

import "vidstack/styles/base.css";
// the following styles are optional - remove to go headless.
import "vidstack/styles/ui/buttons.css";
import "vidstack/styles/ui/sliders.css";

import { HLSVideo, Media } from "@vidstack/react";

function MediaPlayer() {
  return (
    <Media
      controls
      poster="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/thumbnails/thumbnail.jpg"
      view="video"
    >
      <HLSVideo>
        <video
          src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.m3u8"
          preload="none"
          data-video="0"
        />
      </HLSVideo>
    </Media>
  );
}

You’re all setup! You can refer to the Vidstack documentation Open external link to continue getting started.

​​ CDN

1. Import stylesheets and scripts:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack/styles/base.min.css" />
<!-- the following styles are optional - remove to go headless -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack/styles/ui/buttons.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack/styles/ui/sliders.min.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/vidstack/dist/cdn/prod.js"></script>

2. Setup player:

<vds-media
  controls
  poster="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/thumbnails/thumbnail.jpg"
  view="video"
>
  <vds-hls-video>
    <video
      src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.m3u8"
      preload="none"
    ></video>
  </vds-hls-video>
</vds-media>

You’re all setup! You can refer to the Vidstack documentation Open external link to continue getting started.