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.

Was this helpful?

What did you like?

Accurate

Easy to understand

Solved my problem

Helped me decide to use the product

Other

What went wrong?

Hard to understand

Incorrect information

Missing the information

Other

Thank you for helping improve Cloudflare's documentation!