@grfzhl/vue-hls-player 1.0.6 → 1.0.8

package/README.md

@@ -39,24 +39,26 @@ npm i vue-hls-player
 </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"
-  />
+  <div id="video-container">
+    <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"
+    />
+  </div>
 </template>
 ```
 For **nuxt 3**, try to wrap this component in ClientOnly, images for previewImageLink need to store in public folder
@@ -97,6 +99,49 @@ function processPause(progress: number) {
   console.log(progress)
 }
 ```
+
+**@video-ended**:
+1. Event, called if the video has ended
+@video-ended="videoEnded"
+```
+const videoEnded = (data) => {
+  console.log("video ended at time: ", data.currentTime)
+  console.log("video element ", data.video)
+}
+```
+
+**@video-fullscreen-change**:
+1. Event, event dispatcher for detecting fullscreen change
+@video-fullscreen-change="fullscreenChange"
+```
+const fullScreenAction = (fullScreenElement) => {
+	if(fullScreenElement === null) {
+		console.log("fullscreen is off")
+	} else {
+		console.log("fullscreen is on")
+	}
+}
+```
+
+**@video-fullscreen-action**:
+1. Event, handling the fullscreen action of the player
+@video-fullscreen-action="fullScreenAction"
+```
+const fullScreenAction = (data) => {
+	if(isFullscreen.value) {
+		document.exitFullscreen();
+	} else {
+		document.getElementById("video-container").requestFullscreen()
+	}
+}
+```
+**showTranscriptBlock**:
+1. value: true or false, type: Boolean
+
+pass true, if you want to show the transcript block.
+To make transcripts work, your need to provide `.txt` files
+in the same path and base-filename like the passed `subtitles` prop.
+
 **previewImageLink**: 
 1. value: 'poster.webp', type: String
 
@@ -118,19 +163,48 @@ it can show and hide the video control panel
 1. value: array of object, for subtitles to append: object has link, lang
 
 subtitles to add as tracks to the video
+example: 
+```
+[{
+  link: `https://url-to-your/subtitles.vtt`,
+  label: 'English',
+  lang: 'en'
+}]
+```
+
+**isMuted**:
+1 value: true or false, type: Boolean
+
+it makes the video muted
+
+**autoplay**:
+1. value: true or false, type Boolean
+
+it will set the native <video> autoplay property
 
 ### Last release:
+v1.0.8
+- Add slots to inject own elements nearby video element
+- Add prop for autoplay video
+
+v1.0.7
+- Add function to handle own logic for fullscreen
+
+v1.0.6
+- Small fixes
+- Remove debug log
+
 v1.0.5
-1. Load transcriptions additionally to subtitles
-2. Add styled transcription block for better readability
-3. Improve interaction and dynamic params
+- Load transcriptions additionally to subtitles
+- Add styled transcription block for better readability
+- Improve interaction and dynamic params
 
 v1.0.4
-1. Make subtitles dynamic
-2. Add new switch to disable the subtitle block
-3. Fix some minor issues
+- Make subtitles dynamic
+- Add new switch to disable the subtitle block
+- Fix some minor issues
 
 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.
+- Removed controls in favour of themable overlay by `player.style`.
+- Updated hls library
+- Added styled caption overlays. Added separate container to show all captions.

package/dist/VideoPlayer/BasePlayer.vue

@@ -1,38 +1,45 @@
 <template>
   <div class="video-container">
-    <media-theme-sutro class="video-player-theme-container">
-      <video
-        class="hls-player"
-        slot="media"
-        @pause="pause"
-        @keyup="changeSpeed"
-        @ended="onVideoEnd"
-        @seek="seekVideo"
-        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 class="custom-subtitles" v-show="!showTranscriptBlock">
-      <div class="subtitle-text" ref="subtitlesContainer" style="display: none;"></div>
+    <div class="media-container" id="hls-player-media-container">
+      <slot name="before-media"></slot>
+      <media-theme-sutro class="video-player-theme-container">
+        <video
+          class="hls-player"
+          slot="media"
+          @pause="pause"
+          @keyup="changeSpeed"
+          @ended="onVideoEnd"
+          @seek="seekVideo"
+          ref="video"
+          :poster="previewImageLink"
+          :controls="false"
+          :title="title"
+          controlslist="nodownload"
+          playsinline
+          crossorigin
+          :muted="mutedAttr"
+          :autoplay="autoplay && isMuted"
+        >
+          <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 class="custom-subtitles" v-show="(isFullscreen) || (!showTranscriptBlock)">
+        <div class="subtitle-text" ref="subtitlesContainer" style="display: none;"></div>
+      </div>
+      <slot name="after-media"></slot>
     </div>
   </div>
+  <slot name="before-transcripts"></slot>
   <SubtitleBlock
     :subtitle="currentSubtitle"
     :cursor="videoCursor" 
@@ -40,10 +47,12 @@
     @seek="seekVideo"
     @toggleTranscript="toggleTranscript">
   </SubtitleBlock>
+  <slot name="after-transcripts"></slot>
+  <slot name="default"></slot>
 </template>
 
 <script setup>
-import { onMounted, onUpdated, ref, onUnmounted, computed } from 'vue'
+import { onMounted, onUpdated, ref, onUnmounted, computed, watch } from 'vue'
 import Hls from 'hls.js'
 import 'player.style/sutro';
 import SubtitleBlock from './SubtitleBlock.vue';
@@ -69,6 +78,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  autoplay: {
+    type: Boolean,
+    default: false
+  },
   /**
    * array of object, for
    * subtitles to append:
@@ -92,23 +105,57 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
 const video = ref(null)
 const subtitlesContainer = ref(null)
 const currentSubtitleLang = ref(null)
 const videoCursor = ref(0)
 const isFullscreen = ref(false);
 
+const videoElement = defineModel()
+
 onMounted(() => {
   prepareVideoPlayer()
   if (video.value) {
-    checkFullscreen();
+
+    // pass video element as reference to model
+    if (!videoElement.value) {
+      videoElement.value = video.value;
+    }
+
     video.value.addEventListener('timeupdate', updateCurrentTime);
     document.addEventListener('fullscreenchange', onFullscreenChange);
+
+    /**
+     * overwrite player.style video fullscreen button
+     * to inject own fullscreen logic
+     */
+    const observer = new MutationObserver((mutationsList, observer) => {
+    const mediaTheme = document.querySelector('.video-player-theme-container');
+
+    if (mediaTheme && mediaTheme.shadowRoot) {
+      const fullscreenButton = mediaTheme.shadowRoot.querySelector('media-fullscreen-button');
+      if (fullscreenButton) {
+        fullscreenButton.handleClick = (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          event.stopImmediatePropagation();
+          emit('video-fullscreen-action', event)
+        }
+        observer.disconnect();
+      } else {
+        console.error('Button not found in Shadow DOM!');
+      }
+    } else {
+      console.error('Shadow Root not found!');
+    }
+    })
+    observer.observe(document.body, { childList: true, subtree: true });
   }
 })
 
 onUpdated(() => {
+
 })
 
 onUnmounted(() => {
@@ -118,6 +165,11 @@ onUnmounted(() => {
   }
 });
 
+const mutedAttr = computed(() => {
+  // autoplay is only possible when muted
+  return (props.autoplay || props.isMuted);
+})
+
 const currentSubtitle = computed(() => {
   if(props.subtitles) {
     const current = props.subtitles.filter((subt) => {
@@ -128,12 +180,17 @@ const currentSubtitle = computed(() => {
   return null
 })
 
-function checkFullscreen() {
-  isFullscreen.value = !!document.fullscreenElement;
-};
+watch([props, videoElement], (a) => {
+  if(a[0].autoplay && a[1]) {
+    // autoplay is only possible when muted
+    a[1].muted = true
+    setTimeout(() => {
+      a[1].play();
+    }, 200)
+  }
+})
 
 function onFullscreenChange() {
-  checkFullscreen();
   emit('video-fullscreen-change', document.fullscreenElement)
 };
 
@@ -168,25 +225,31 @@ function prepareVideoPlayer() {
         track.addEventListener("cuechange", () => {
           const activeCues = track.activeCues;
           currentSubtitleLang.value = track.language
-          if (activeCues && activeCues.length > 0) {
-            subtitlesContainer.value.textContent = activeCues[0].text
-            subtitlesContainer.value.style.display = "block";
-          } else {
-            subtitlesContainer.value.style.display = "none";
+          if(subtitlesContainer.value) {
+            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]) {
           if (track.mode === "showing") {
             const activeCues = track.activeCues;
             currentSubtitleLang.value = track.language
-            if (activeCues && activeCues.length > 0) {
-              subtitlesContainer.value.style.display = "block";
-              subtitlesContainer.value.textContent = activeCues[0].text
-            } else {
-              subtitlesContainer.value.style.display = "none";
+            if(subtitlesContainer.value) {
+              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";
+            if(subtitlesContainer.value) {
+              subtitlesContainer.value.style.display = "none";
+            }
           }
           previousModes[index] = track.mode;
         }

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -4,6 +4,7 @@
     :link="link"
     :progress="progress"
     :isMuted="isMuted"
+    :autoplay="autoplay"
     :isControls="isControls"
     :onVideoEnd="onVideoEnd"
     :isFullscreen="isFullscreen"
@@ -11,14 +12,24 @@
     @pause="pause"
     @video-ended="onVideoEnd"
     @video-fullscreen-change="onFullscreenChange"
-  />
+    @video-fullscreen-action="oVideoFullscreenAction"
+    v-model="videoElement"
+  >
+    <template v-slot:before-media><slot name="before-media"></slot></template>
+    <template v-slot:after-media><slot name="after-media"></slot></template>
+    <template v-slot:before-transcripts><slot name="before-transcripts"></slot></template>
+    <template v-slot:after-transcripts><slot name="after-transcripts"></slot></template>
+  </BasePlayer>
 </template>
 
 <script setup>
 import BasePlayer from './BasePlayer.vue'
+import { ref } from 'vue'
 
 const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
 
+const videoElement = ref(null);
+
 defineProps({
   previewImageLink: {
     type: String,
@@ -36,6 +47,10 @@ defineProps({
     type: Boolean,
     default: false
   },
+  autoplay: {
+    type: Boolean,
+    default: false
+  },
   isControls: {
     type: Boolean,
     default: true
@@ -62,4 +77,8 @@ function onVideoEnd(data) {
 function onFullscreenChange(data) {
   emit('video-fullscreen-change', data);
 }
+
+function oVideoFullscreenAction(data) {
+  emit('video-fullscreen-action', data)
+}
 </script>

package/dist/VideoPlayer/index.vue

@@ -4,14 +4,22 @@
     @pause="pause"
     @video-fullscreen-change="onVideoFullScreenChange"
     @video-ended="onVideoEnd"
+    @video-fullscreen-action="oVideoFullscreenAction"
     :previewImageLink="previewImageLink"
     :showTranscriptBlock="showTranscriptBlock"
     :isFullscreen="isFullscreen"
     :link="link"
     :progress="progress"
     :isMuted="isMuted"
-  />
-
+    :autoplay="autoplay"
+    v-model="videoElement"
+  >
+    <template v-slot:before-media><slot name="before-media"></slot></template>
+    <template v-slot:after-media><slot name="after-media"></slot></template>
+    <template v-slot:before-transcripts><slot name="before-transcripts"></slot></template>
+    <template v-slot:after-transcripts><slot name="after-transcripts"></slot></template>
+  </VDefaultVideoPlayer>
+  
   <VPreviewVideoPlayer
     v-else-if="type === 'preview'"
     :previewImageLink="previewImageLink"
@@ -22,8 +30,11 @@
 <script setup>
 import VDefaultVideoPlayer from './VDefaultVideoPlayer.vue'
 import VPreviewVideoPlayer from './VPreviewVideoPlayer.vue'
+import { ref } from 'vue'
 
-const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change'])
+const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
+
+const videoElement = ref(null);
 
 defineProps({
   previewImageLink: {
@@ -46,6 +57,10 @@ defineProps({
     type: Boolean,
     default: false
   },
+  autoplay: {
+    type: Boolean,
+    default: false
+  },
   isControls: {
     type: Boolean,
     default: true
@@ -69,4 +84,7 @@ function onVideoFullScreenChange(data) {
 function onVideoEnd(data) {
   emit('video-ended', data);
 }
+function oVideoFullscreenAction(data) {
+  emit('video-fullscreen-action', data)
+}
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@grfzhl/vue-hls-player",
   "private": false,
-  "version": "1.0.6",
+  "version": "1.0.8",
   "type": "module",
   "files": [
     "dist"