@grfzhl/vue-hls-player 1.0.18 → 1.0.20

package/dist/VideoPlayer/BasePlayer.vue

@@ -46,6 +46,7 @@
             :src="subtitle.link"
             kind="subtitles"
             :srclang="subtitle.lang"
+            @error="onSubtitleError(subtitle.link)"
             :label="subtitle.label" :default="i === 0" />
         </video>
       </media-theme-sutro>
@@ -68,7 +69,7 @@
 </template>
 
 <script setup>
-import { onMounted, onUpdated, ref, onUnmounted, computed, watch } from 'vue'
+import { onMounted, onUpdated, ref, onUnmounted, computed, watch, toRef } from 'vue'
 import Hls from 'hls.js'
 import 'player.style/sutro';
 import SubtitleBlock from './SubtitleBlock.vue';
@@ -139,6 +140,9 @@ const orientation = ref(null)
 const autoHideIntroTitle = ref(false);
 const initialPlayButton = ref(false);
 const hideInitialPlayButton = ref(false)
+const link = toRef(props, 'link');
+const previewImageLink = toRef(props, 'previewImageLink');
+let hls = new Hls()
 
 const videoElement = defineModel()
 
@@ -216,10 +220,10 @@ onUpdated(() => {
 onUnmounted(() => {
   if (video.value) {
     video.value.removeEventListener('timeupdate', updateCurrentTime);
-    document.removeEventListener('fullscreenchange', onFullscreenChange);
-    document.removeEventListener('orientationchange', onOrientationChange);
-    window.screen.orientation.addEventListener("change", onOrientationChange);
   }
+  document.removeEventListener('fullscreenchange', onFullscreenChange);
+  document.removeEventListener('orientationchange', onOrientationChange);
+  window.screen.orientation.removeEventListener("change", onOrientationChange);
 });
 
 const mutedAttr = computed(() => {
@@ -238,15 +242,23 @@ const currentSubtitle = computed(() => {
 })
 
 watch([props, videoElement], (a) => {
-  if(a[0].autoplay && a[1]) {
+  if(a[0].autoplay && a[1] && a[1].paused) {
     // autoplay is only possible when muted
     a[1].muted = true
     setTimeout(() => {
-      a[1].play();
+      a[1].play().catch(err => console.warn("Autoplay-Error:", err));
     }, 200)
   }
 })
 
+watch(link, (v) => {
+  prepareVideoPlayer();
+})
+
+function onSubtitleError(link) {
+  console.error(`Error on loading subtitles: ${link}`);
+}
+
 function onFullscreenChange() {
   isFullscreen.value = !!document.fullscreenElement
   emit('video-fullscreen-change', document.fullscreenElement)
@@ -295,9 +307,9 @@ function seekVideo(time) {
 }
 
 function prepareVideoPlayer() {
-  let hls = new Hls()
   let stream = props.link
   hls.loadSource(stream)
+  hls.attachMedia(video.value)
 
   if (video.value) {
     hls.attachMedia(video.value)

package/dist/VideoPlayer/VDefaultVideoPlayer.vue

@@ -26,13 +26,13 @@
 
 <script setup>
 import BasePlayer from './BasePlayer.vue'
-import { ref } from 'vue'
+import { ref, toRef } from 'vue'
 
 const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
 
 const videoElement = ref(null);
 
-defineProps({
+const props = defineProps({
   previewImageLink: {
     type: String,
     default: ''
@@ -75,6 +75,9 @@ defineProps({
   }
 })
 
+const link = toRef(props, 'link');
+const previewImageLink = toRef(props, 'previewImageLink');
+
 function pause(currentTime) {
   emit('pause', currentTime)
 }

package/dist/VideoPlayer/index.vue

@@ -32,13 +32,13 @@
 <script setup>
 import VDefaultVideoPlayer from './VDefaultVideoPlayer.vue'
 import VPreviewVideoPlayer from './VPreviewVideoPlayer.vue'
-import { ref } from 'vue'
+import { ref, toRef } from 'vue'
 
 const emit = defineEmits(['pause', 'video-ended', 'video-fullscreen-change', 'video-fullscreen-action'])
 
 const videoElement = ref(null);
 
-defineProps({
+const props = defineProps({
   previewImageLink: {
     type: String,
     default: ''
@@ -85,6 +85,9 @@ defineProps({
   }
 })
 
+const link = toRef(props, 'link');
+const previewImageLink = toRef(props, 'previewImageLink');
+
 function pause(currentTime) {
   emit('pause', currentTime)
 }

package/package.json

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