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

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.