Package Exports

@grfzhl/vue-hls-player
@grfzhl/vue-hls-player/dist/vue-hls-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 (@grfzhl/vue-hls-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-player

Descriptions

It is a video player for the m3u8 format thankfully forked by LeonidShv/vue-hls-video-player. Customized to make the player themable. Added support for showing subtitles / captions of the videos.

Requirements: only for the vue 3 and nuxt 3 projects

Examples, how to use component

npm i vue-hls-player

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

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

  const subtitles = [
    {
        link: "subtitles-de.vtt",
        label: "Deutsch",
        lang: "de"
    },
    {
        link: "subtitles-en.vtt",
        label: "English",
        lang: "en"
    }
]
</script>

<template>
  <VideoPlayer
      type="default"
      @pause="processPause"
      previewImageLink="poster.webp"
      link="videoLink.m3u8"
      :progress="30"
      :isMuted="false"
      :isControls="true"
            :subtitles="subtitles"
      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"

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"

@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

progress:

value: true or false, type: Boolean

it can turn on and off the sound of the video

it can show and hide the video control panel

subtitles:

value: array of object, for subtitles to append: object has link, lang

subtitles to add as tracks to the video

Last release:

v1.0.5

Load transcriptions additionally to subtitles
Add styled transcription block for better readability
Improve interaction and dynamic params

v1.0.4

Make subtitles dynamic
Add new switch to disable the subtitle block
Fix some minor issues

v1.0.3

Removed controls in favour of themable overlay by player.style.
Updated hls library
Added styled caption overlays. Added separate container to show all captions.