Package Exports

vue-hls-video-player
vue-hls-video-player/dist/vue-hls-video-player.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-hls-video-player) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

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"

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:

Event, for processing pauses: @pause="processPause"

function processPause(progress: number) {
  console.log(progress)
}

previewImageLink:

value: 'poster.webp', type: String

poster image for the video player

link:

value: 'videoLink.m3u8', type: String

link on video in format m3u8

isMuted:

value: true or false, type: Boolean

it can turn on and off the sound of the video

isControls:

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:

Last releas:

v1.0.0

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