Cloudflare Docs
Stream
Cloudflare Docs
Stream
GitHub icon
Visit Stream on GitHub
Set theme to dark (⇧+D)
  1. Products
  2. Stream
  3. Examples
  4. Shaka Player

Shaka Player

Example of video playback with Cloudflare Stream and Shaka Player

Run and edit this code in your browser on Stackblitz.

First, create a video element, using the poster attribute to set a preview thumbnail image. Refer to Display thumbnails for instructions on how to generate a thumbnail image using Cloudflare Stream.

<video
	id="video"
	width="640"
	poster="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/thumbnails/thumbnail.jpg"
	controls
	autoplay

></video>

Then listen for DOMContentLoaded event, create a new instance of Shaka Player, and load the manifest URI.

// Replace the manifest URI with an HLS or DASH manifest from Cloudflare Stream

const manifestUri =
	'https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.mpd';


document.addEventListener('DOMContentLoaded', () => {
	const player = new shaka.Player(video);
	const video = document.getElementById('video');
	await player.load(manifestUri);

});

Refer to the Shaka Player documentation for more information.