/vue-hls-video-player

It is a npm module for watching m3u8 video format

MIT LicenseMIT

vue-hls-video-player

Descriptions

It is a video player for the m3u8 format

Requirements: only for the vue 3 and nuxt 3 projects

Examples, how to use component

npm i vue-hls-video-player

<script setup>
  import { VideoPlayer } from 'vue-hls-video-player';

  function processPause(progress) {
    console.log(progress)
  }
</script>

<template>
  <VideoPlayer
      type="default"
      @pause="processPause"
      previewImageLink="poster.webp"
      link="videoLink.m3u8"
      :progress="30"
      :isMuted="false"
      :isControls="true"
      class="customClassName"
  />

  <VideoPlayer
      type="preview"
      previewImageLink="poster.webp"
      link="videoLink.m3u8"
      class="customClassName"
  />
</template>

For nuxt 3, try to wrap this component in ClientOnly, images for previewImageLink need to store in public folder

<ClientOnly>
  <VideoPlayer
    type="preview"
    previewImageLink="/img/learn.webp"
    link="https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8"
    class="customClassName"
  />
</ClientOnly>

Props:

type:

  1. value: 'default', type: String

default video player, where you can process pauses and setup progress time.

Default props for the type: default:

:isMuted="false"
:isControls="true"
  1. value: 'preview', type: String

you can pause video on hover, without sound (muted), without controls. It does not have access to props: isMuted, isControls, progress, @pause

Default props for the type: preview:

:isMuted="true"
:isControls="false"

@pause:

  1. Event, for processing pauses: @pause="processPause"
function processPause(progress: number) {
  console.log(progress)
}

previewImageLink:

  1. value: 'poster.webp', type: String

poster image for the video player

link:

  1. value: 'videoLink.m3u8', type: String

link on video in format m3u8

isMuted:

  1. value: true or false, type: Boolean

it can turn on and off the sound of the video

isControls:

  1. value: true or false, type: Boolean

it can show and hide the video control panel

Aditional information

If you have any ideas, or need a fast fix, write me and I try to help you

Contacts:

  1. GitHub
  2. npm
  3. Linkedin
  4. Portfolio

Last releas:

v1.0.0

  1. Added props isMuted, isControls for type="default".
  2. Clean code.
  3. Improved documentation.