@grfzhl/vue-hls-player 1.0.7 → 1.0.9

package/README.md

@@ -172,7 +172,25 @@ example:
 }]
 ```
 
+**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.9
+- Fix sizes in fullscreen mode for video
+- Hide transcript block completely when hidden
+
+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
 

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" :class="{'is-fullscreen': isFullscreen}">
+        <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:
@@ -99,10 +112,17 @@ 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);
 
@@ -135,6 +155,7 @@ onMounted(() => {
 })
 
 onUpdated(() => {
+
 })
 
 onUnmounted(() => {
@@ -144,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) => {
@@ -154,12 +180,18 @@ 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();
+  isFullscreen.value = !!document.fullscreenElement
   emit('video-fullscreen-change', document.fullscreenElement)
 };
 
@@ -194,25 +226,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;
         }
@@ -270,9 +308,22 @@ function changeSpeed(e) {
 
   .video-player-theme-container, .hls-player {
     width: 100%;
+    height: 100%;
   }
 
   .video-container {
     position: relative;
+    line-height: 0;
+  }
+
+  .video-player-theme-container.is-fullscreen {
+    width: 100vw;
+    height: 100vh;
+    object-fit: cover;
   }
+  .video-player-theme-container.is-fullscreen .hls-player {
+    width: 100vw;
+    height: 100vh;
+    object-fit: cover;
+   }
 </style>

package/dist/VideoPlayer/SubtitleBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="transcript-container" ref="subtitlesContainer">
+  <div class="transcript-container" ref="subtitlesContainer" v-if="showTranscriptBlock">
     <div class="transcript-toggle">
       <button data-headlessui-state="open" @click="toggleTranscript()">
         <div class="icon">

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -4,6 +4,7 @@
     :link="link"
     :progress="progress"
     :isMuted="isMuted"
+    :autoplay="autoplay"
     :isControls="isControls"
     :onVideoEnd="onVideoEnd"
     :isFullscreen="isFullscreen"
@@ -12,14 +13,23 @@
     @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,
@@ -37,6 +47,10 @@ defineProps({
     type: Boolean,
     default: false
   },
+  autoplay: {
+    type: Boolean,
+    default: false
+  },
   isControls: {
     type: Boolean,
     default: true

package/dist/VideoPlayer/index.vue

@@ -11,8 +11,15 @@
     :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"
@@ -23,9 +30,12 @@
 <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', 'video-fullscreen-action'])
 
+const videoElement = ref(null);
+
 defineProps({
   previewImageLink: {
     type: String,
@@ -47,6 +57,10 @@ defineProps({
     type: Boolean,
     default: false
   },
+  autoplay: {
+    type: Boolean,
+    default: false
+  },
   isControls: {
     type: Boolean,
     default: true

package/package.json

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