Using Shaka Player

1
<div class="shaka-player" style="width:100%; position:relative; aspect-ratio:16/9; background:#000;">
2
  <video
3
    poster="https://worker.antcdn.net/v1/thumbnail/{orgID}/{envID}/{edgeKey}.png?width=1920&timeStamp=30"
4
    data-src="https://worker.antcdn.net/v1/{edgeKey}/master.m3u8"
5
    controls
6
    playsinline
7
    style="position:absolute; inset:0; width:100%; height:100%;"
8
  ></video>
9
</div>

import shaka from 'shaka-player/dist/shaka-player.compiled.js';

// Because HLS streaming isn't natively supported by some browsers,
// shaka starts with a polyfill
shaka.polyfill.installAll();

// Transparent error handling for very very old browsers
if (shaka.Player.isBrowserSupported()) {
    // There can be multiple shaka player instances on a page,
    // so we loop through them
    document.querySelectorAll('.shaka-player video[data-src]').forEach(async (video: HTMLVideoElement) => {
        // create and configure the player
          const player = new shaka.Player();
          // Full docs here: https://shaka-player-demo.appspot.com/docs/api/tutorial-config.html
          player.configure({
            streaming: {
                // After seeking, how many seconds should be
                // buffered before playing again?
                rebufferingGoal: 0.1,
                // How many seconds into the future
                // should be buffered?
                bufferingGoal: 15,
                // How many seconds of previous video
                // should be kept
                bufferBehind: 10, // how much buffer to leave in the past
            },
          });
          try {
            await player.attach(video);
            await player.load(video.dataset.src as string);
          } catch (e) {
            console.error('Error loading video', e);
          }
    });
} else {
console.error('Browser does not support Shaka Player');
}