Cloudflare Docs
Stream
Cloudflare Docs
Stream
GitHub icon
Edit this page 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

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-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/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-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/manifest/video.mpd';


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

});

Refer to the Shaka Player documentation for more information.