Vue Video Stream

Vue Video Stream is a Vue 3 component that provides HLS (HTTP Live Streaming) video playback functionality using hls.js.

Features

• HLS video streaming support
• Fallback for native HLS support (Safari)
• Configurable video controls
• Thumbnail support
• Auto-cleanup on component unmount

Installation

npm install @970design/vue-video-stream

Usage

<script setup>
  import VueVideoStream from '@970design/vue-video-stream';
</script>
<template>
  <VueVideoStream
    :video="{
      hls: 'https://example.com/stream.m3u8',
      thumbnail: 'https://example.com/thumbnail.jpg',
      muted: '1',
      autoplay: '1',
      controls: '1',
      loop: '0'
    }"
  />
</template>

Props

| Property | Type | Description | Format | |------------|----------|---------------------------------------|-----------| | hls | String | URL to HLS stream | Valid URL | | thumbnail | String | Video poster image URL | Valid URL | | muted | String | Mute video playback ('0' or '1') | '0'/'1' | | autoplay | String | Enable autoplay ('0' or '1') | '0'/'1' | | controls | String | Show video controls ('0' or '1') | '0'/'1' | | loop | String | Enable video loop ('0' or '1') | '0'/'1' |

hls-config

An optional second prop, hls-config, is merged over the component's hls.js defaults (enableWorker: false, capLevelToPlayerSize: true) and passed to the Hls constructor. Use it to tune playback for a specific context — any hls.js config option is accepted. For example, an ambient looping background video can be kept to a small buffer and a low starting rendition so it doesn't compete with the rest of the page:

<VueVideoStream
  :video="video"
  :hls-config="{
    maxBufferLength: 8,
    maxMaxBufferLength: 15,
    startLevel: 0
  }"
/>

Integrations

If you're using this package in a headless WordPress project with ACF, check out the companion ACF Field Plugin that makes it easy to integrate Cloudflare Stream videos with your Vue front-end.

Browser Support

Works in all modern browsers that support HLS playback either natively or through hls.js.

More Information

The development of this package is sponsored by 970 Design, a creative agency based in Vail, Colorado. If you need help with your headless WordPress project, please don't hesitate to reach out.