@grfzhl/vue-hls-player 1.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Oliver Schörwerth
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# 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**: 
+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"
+```
+2. 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**: 
+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
+
+**progress**:
+1. 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**:
+1. value: array of object, for subtitles to append: object has link, lang
+
+subtitles to add as tracks to the video
+
+### Last release:
+v1.0.3
+1. Removed controls in favour of themable overlay by `player.style`.
+2. Updated hls library
+3. Added styled caption overlays. Added separate container to show all captions.

package/dist/VideoPlayer/BasePlayer.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="video-container">
+    <media-theme-sutro>
+      <video
+        slot="media"
+        @pause="pause"
+        @ended="pause"
+        @keyup="changeSpeed"
+        ref="video"
+        :poster="previewImageLink"
+        :controls="false"
+        :title="title"
+        controlslist="nodownload"
+        playsinline
+        crossorigin
+      >
+        <source
+          :src="link"
+          type="application/x-mpegURL"
+        />
+        <track 
+          v-if="subtitles.length"
+          v-for="(subtitle, i) in subtitles"
+          :src="subtitle.link"
+          kind="subtitles"
+          :srclang="subtitle.lang"
+          :label="subtitle.label" :default="i === 0" />
+      </video>
+    </media-theme-sutro>
+    <div ref="subtitlesContainer" class="custom-subtitles"></div>
+  </div>
+  <SubtitleBlock :vttFile="subtitles[0]" :cursor="videoCursor"></SubtitleBlock>
+</template>
+
+<script setup>
+import { onMounted, onUpdated, ref, onUnmounted } from 'vue'
+import Hls from 'hls.js'
+import 'player.style/sutro';
+import SubtitleBlock from './SubtitleBlock.vue';
+
+const props = defineProps({
+  previewImageLink: {
+    type: String,
+    default: ''
+  },
+  link: {
+    type: String,
+    default: ''
+  },
+  progress: {
+    type: Number,
+    default: 0
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  isMuted: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * array of object, for
+   * subtitles to append:
+   * object has link, lang ()
+   */
+  subtitles: {
+    type: Array,
+    default: []
+  }
+})
+
+const emit = defineEmits(['pause', 'test'])
+const video = ref(null)
+const subtitlesContainer = ref(null)
+const videoCursor = ref(0)
+
+onMounted(() => {
+  prepareVideoPlayer()
+  if (video.value) {
+    video.value.addEventListener('timeupdate', updateCurrentTime);
+  }
+})
+
+onUpdated(() => {
+})
+
+onUnmounted(() => {
+  if (video.value) {
+    video.value.removeEventListener('timeupdate', updateCurrentTime);
+  }
+});
+
+function updateCurrentTime() {
+  videoCursor.value = video.value.currentTime;
+}
+
+function prepareVideoPlayer() {
+  let hls = new Hls()
+  let stream = props.link
+  hls.loadSource(stream)
+
+  if (video.value) {
+    hls.attachMedia(video.value)
+    video.value.muted = props.isMuted
+    video.value.currentTime = props.progress
+
+    const textTracks = video.value.textTracks;
+    let previousModes = Array.from(textTracks).map((track) => track.mode);
+    function checkTrackModeChanges() {
+      Array.from(textTracks).forEach((track, index) => {
+        track.addEventListener("cuechange", () => {
+          const activeCues = track.activeCues;
+          if (activeCues && activeCues.length > 0) {
+            subtitlesContainer.value.textContent = activeCues[0].text
+            subtitlesContainer.value.style.display = "block";
+          } else {
+            subtitlesContainer.value.style.display = "none";
+          }
+        });
+        if (track.mode !== previousModes[index]) {
+          console.log(`Track mode changed: ${track.mode}`);
+          if (track.mode === "showing") {
+            const activeCues = track.activeCues;
+            if (activeCues && activeCues.length > 0) {
+              subtitlesContainer.value.style.display = "block";
+              subtitlesContainer.value.textContent = activeCues[0].text
+            } else {
+              subtitlesContainer.value.style.display = "none";
+            }
+          } else {
+            subtitlesContainer.value.style.display = "none";
+          }
+          previousModes[index] = track.mode;
+        }
+      });
+    }
+    setInterval(checkTrackModeChanges, 100);
+  }
+}
+
+function pause() {
+  const currentTime = video?.value?.currentTime || 0
+
+  emit('pause', currentTime)
+}
+
+function changeSpeed(e) {
+  if (e.key === 'w' && video && video.value) {
+    video.value.playbackRate = video.value.playbackRate + 0.25
+  } else if (e.key === 's' && video.value) {
+    video.value.playbackRate = video.value.playbackRate - 0.25
+  }
+}
+</script>
+<style>
+  video::cue {
+    display: none!important;
+    text-indent: -999%;
+    color: transparent;
+    background-color: transparent;
+  }
+
+  .custom-subtitles {
+    position: absolute;
+    left: 50%;
+    width: auto;
+    max-width: 90%;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    font-size: 16px;
+    font-family: Arial, sans-serif;
+    line-height: 1.5;
+    padding: 10px 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+    margin-top: -120px;
+    transform: translateX(-50%) translateY(-100%);
+  }
+</style>

package/dist/VideoPlayer/SubtitleBlock.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="transcript-container"
+    ref="subtitlesContainer">
+    <ul v-if="cues.length" class="subtitles">
+      <li v-for="cue of cues" :class="{'current-highlight': cursor >= cue.start && cursor <= cue.end}">
+        <span class="seconds">{{ secondsToTime(cue.start) }} - {{ secondsToTime(cue.end) }}</span>
+        <span class="text">{{ cue.text }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="css" scoped>
+  .subtitles li.current-highlight {
+    font-weight: bold;
+  }
+</style>
+
+<script setup>
+import { onMounted, onUpdated, ref } from 'vue'
+
+const props = defineProps({
+  vttFile: {
+    type: String,
+    default: ''
+  },
+  cursor: {
+    type: Number,
+    default: 0
+  },
+})
+
+const emit = defineEmits(['pause', 'test'])
+const subtitlesContainer = ref(null)
+const cues = ref([])
+
+onMounted(async () => {
+  cues.value = await parseVTT(props.vttFile.link)
+  console.log(cues.value)
+})
+
+onUpdated(async () => {
+  // auto scroll text
+  if(subtitlesContainer) {
+    const activeSubtitle = subtitlesContainer?.value?.querySelectorAll('li.current-highlight')[0];
+    if (activeSubtitle) {
+      subtitlesContainer.value.scrollTop = activeSubtitle.offsetTop - subtitlesContainer.value.offsetTop;
+    }
+  }
+})
+
+
+async function parseVTT(fileUrl) {
+  const response = await fetch(fileUrl);
+  const text = await response.text();
+  const cues = [];
+  const lines = text.split("\n");
+  let cue = null;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+    if (!line) continue;
+
+    if (line.includes("-->")) {
+      const [start, end] = line.split(" --> ");
+      cue = { start: timeToSeconds(start), end: timeToSeconds(end), text: "" };
+    } else if (cue) {
+      cue.text += line + " ";
+    }
+    if (cue && (!lines[i + 1] || lines[i + 1].includes("-->"))) {
+      cues.push(cue);
+      cue = null;
+    }
+  }
+  return cues;
+}
+
+function timeToSeconds(timestamp) {
+  const [hours, minutes, seconds] = timestamp.split(":").map(parseFloat);
+  return hours * 3600 + minutes * 60 + seconds;
+}
+
+function secondsToTime(seconds) {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = Math.floor(seconds % 60);
+  const pad = (num) => String(num).padStart(2, '0');
+  return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
+}
+</script>
+
+
+

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -0,0 +1,43 @@
+<template>
+  <BasePlayer
+    :previewImageLink="previewImageLink"
+    :link="link"
+    :progress="progress"
+    :isMuted="isMuted"
+    :isControls="isControls"
+    @pause="pause"
+  />
+</template>
+
+<script setup>
+import BasePlayer from './BasePlayer.vue'
+
+const emit = defineEmits(['pause'])
+
+defineProps({
+  previewImageLink: {
+    type: String,
+    default: ''
+  },
+  link: {
+    type: String,
+    default: ''
+  },
+  progress: {
+    type: Number,
+    default: 0
+  },
+  isMuted: {
+    type: Boolean,
+    default: false
+  },
+  isControls: {
+    type: Boolean,
+    default: true
+  },
+})
+
+function pause(currentTime) {
+  emit('pause', currentTime)
+}
+</script>

package/dist/VideoPlayer/VPreviewVideoPlayer.vue

@@ -0,0 +1,33 @@
+<template>
+  <BasePlayer
+    :previewImageLink="previewImageLink"
+    :link="link"
+    :isMuted="true"
+    :isControls="false"
+    @mouseover="turnOn"
+    @mouseleave="turnOff"
+  />
+</template>
+
+<script setup>
+import BasePlayer from './BasePlayer.vue'
+
+defineProps({
+  previewImageLink: {
+    type: String,
+    default: ''
+  },
+  link: {
+    type: String,
+    default: ''
+  },
+})
+
+function turnOn(e) {
+  e.target.play()
+}
+
+function turnOff(e) {
+  e.target.pause()
+}
+</script>

package/dist/VideoPlayer/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <VDefaultVideoPlayer
+    v-if="type === 'default'"
+    @pause="pause"
+    :previewImageLink="previewImageLink"
+    :link="link"
+    :progress="progress"
+    :isMuted="isMuted"
+    :isControls="isControls"
+  />
+
+  <VPreviewVideoPlayer
+    v-else-if="type === 'preview'"
+    :previewImageLink="previewImageLink"
+    :link="link"
+  />
+</template>
+
+<script setup>
+import VDefaultVideoPlayer from './VDefaultVideoPlayer.vue'
+import VPreviewVideoPlayer from './VPreviewVideoPlayer.vue'
+
+const emit = defineEmits(['pause'])
+
+defineProps({
+  previewImageLink: {
+    type: String,
+    default: ''
+  },
+  link: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: ''
+  },
+  progress: {
+    type: Number,
+    default: 0
+  },
+  isMuted: {
+    type: Boolean,
+    default: false
+  },
+  isControls: {
+    type: Boolean,
+    default: true
+  },
+})
+
+function pause(currentTime) {
+  emit('pause', currentTime)
+}
+</script>

package/dist/vue-hls-player.js

@@ -0,0 +1,3 @@
+import VideoPlayer from './VideoPlayer/index.vue'
+
+export { VideoPlayer }

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@grfzhl/vue-hls-player",
+  "private": false,
+  "version": "1.0.3",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/vue-hls-player.js",
+  "module": "./dist/vue-hls-player.js",
+  "keywords": [
+    "m3u8",
+    "m3u8 video player",
+    "m3u8 vue video",
+    "hls video player",
+    "hls",
+    "vue hls video player",
+    "vue hls",
+    "caption subtitle"
+  ],
+  "homepage": "https://github.com/grafzahl-io/vue-hls-video-player",
+  "bugs": {
+    "url": "https://github.com/grafzahl-io/vue-hls-video-player/issues"
+  },
+  "author": "Oliver Schörwerth",
+  "license": "MIT License",
+  "dependencies": {
+    "hls.js": "^1.5.19",
+    "player.style": "^0.1.1"
+  }
+}