Cloudflare Docs
Stream
Cloudflare Docs
Stream
Search icon (depiction of a magnifying glass)
GitHub icon
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.

<html>
	<head>
		<script
			type="module"
			src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/bundle.js"
		></script>
	</head>
	<body>
		<vds-media>
			<vds-hls
				controls
				poster="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/thumbnails/thumbnail.jpg"
			>
				<video
					controls
          
					src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.m3u8"
					preload="none"
				></video>
			</vds-hls>
		</vds-media>
	</body>

</html>

Refer to the Vidstack documentation for more information.