Core Web (hls.js)

Framework-agnostic video playback with hls.js. Use Livepeer HLS playback URLs with Vue, Svelte, Angular, or vanilla JavaScript.

Every Livepeer stream and asset produces a standard HLS manifest URL at https://livepeercdn.studio/hls/{playbackId}/index.m3u8. This URL works with any HLS-compatible player. For non-React applications (Vue, Svelte, Angular, vanilla JavaScript), hls.js is the standard library.

HLS.js Integration

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>

Safari supports HLS natively; the else if branch handles that case without hls.js.

Vue example

<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>

Native video element

For Safari-only applications or when HLS support is guaranteed:

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

No JavaScript library required. This works in Safari and any browser with native HLS support (iOS Safari, macOS Safari).

The React Player provides a richer component model for React applications. The video overview covers stream and asset creation.