Shaka Player

まず、ビデオ要素を作成し、poster属性を使用してプレビューサムネイル画像を設定します。サムネイル画像を生成する方法については、サムネイルの表示を参照してください。

<video
  id="video"
  width="640"
  poster="https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.jpg"
  controls
  autoplay
></video>

次に、DOMContentLoadedイベントをリッスンし、新しいShaka Playerのインスタンスを作成し、マニフェストURIをロードします。

// Cloudflare StreamからのHLSまたはDASHマニフェストでマニフェストURIを置き換えます
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);
});

詳細については、Shaka Playerのドキュメント ↗を参照してください。