Cloudflare Docs
Stream
Visit Stream on GitHub
Set theme to dark (⇧+D)

Vidstack

Example of video playback with Cloudflare Stream and Vidstack

Run and edit this code in your browser on Stackblitz.

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:

​​ HTML

  1. Install the package:
npm i vidstack
  1. 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();
  1. Add player markup:
<media-player
src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.m3u8"
poster="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/thumbnails/thumbnail.jpg"
controls
aspect-ratio="16/9"
>
<media-outlet></media-outlet>
</media-player>

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

​​ React

  1. Install packages:
npm i vidstack @vidstack/react
  1. 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 { MediaPlayer, MediaOutlet } from "@vidstack/react";
function Player() {
return (
<MediaPlayer
src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.m3u8"
poster="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/thumbnails/thumbnail.jpg"
controls
aspectRatio={16/9}
>
<MediaOutlet />
</MediaPlayer>
);
}

You’re all setup! You can refer to the Vidstack documentation 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>
  1. Setup player:
<media-player
src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.m3u8"
poster="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/thumbnails/thumbnail.jpg"
controls
aspect-ratio="16/9"
>
<media-outlet></media-outlet>
</media-player>

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