Core Web (hls.js)

npm install hls.js

<video id="player" controls></video>

<script type="module">
  import Hls from 'hls.js';

  const playbackId = 'your-playback-id';
  const src = \`https://livepeercdn.studio/hls/\${playbackId}/index.m3u8\`;
  const video = document.getElementById('player');

  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(src);
    hls.attachMedia(video);
    hls.on(Hls.Events.ERROR, (event, data) => {
      if (data.fatal) {
        switch (data.type) {
          case Hls.ErrorTypes.NETWORK_ERROR:
            hls.startLoad(); // retry on network error
            break;
          case Hls.ErrorTypes.MEDIA_ERROR:
            hls.recoverMediaError();
            break;
          default:
            hls.destroy();
            break;
        }
      }
    });
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // Safari has native HLS support
    video.src = src;
  }
</script>

<template>
  <video ref="videoEl" controls />
</template>

<script setup lang="ts">
import Hls from 'hls.js';
import { ref, onMounted, onBeforeUnmount } from 'vue';

const props = defineProps<{ playbackId: string }>();
const videoEl = ref<HTMLVideoElement>();
let hls: Hls | null = null;

onMounted(() => {
  const src = \`https://livepeercdn.studio/hls/\${props.playbackId}/index.m3u8\`;
  if (Hls.isSupported() && videoEl.value) {
    hls = new Hls();
    hls.loadSource(src);
    hls.attachMedia(videoEl.value);
  } else if (videoEl.value?.canPlayType('application/vnd.apple.mpegurl')) {
    videoEl.value.src = src;
  }
});

onBeforeUnmount(() => hls?.destroy());
</script>

<video
  src="https://livepeercdn.studio/hls/{playbackId}/index.m3u8"
  controls
  playsinline
/>