HLS (m3u8) not working

[msghaderi77]

Hi.
Great player, I Love it..
but I'm facing an error with m3u8.
Video type mp4 works perfectly but type m3u8 gives me an error.

Console errors (if any)

This is the error I'm facing:
__webpack_modules__2[moduleId] is undefined

Environment

• Vue 3 was created with Vite
• Artplayer version: I'd tried different versions but the current version I'm trying is "^4.6.0"
• Browser: firefox, chrome
• Version: latest
• Operating System: windows 10

Code

<template>
    <div ref="artRef" style="width: 100%;aspect-ratio: 16/9"></div>
</template>

<script setup>
import Artplayer from "artplayer";
import Hls from 'hls.js'
import {nextTick, onBeforeUnmount, onMounted, ref, toRefs} from "vue";
const artRef = ref()
const instance = ref(null)
const emmit = defineEmits(['get-instance'])


onMounted(()=>{
  instance.value = new Artplayer({
    container: artRef.value,
    url: 'https://yun.ssdm.cc/SBDM/ShinobinoIttoki01.m3u8',
    type: 'm3u8',
    customType: {
      m3u8: function (video, url) {
        if (Hls.isSupported()) {
          const hls = new Hls();
          hls.loadSource(url);
          hls.attachMedia(video);
        } else {
          const canPlay = video.canPlayType('application/vnd.apple.mpegurl');
          if (canPlay === 'probably' || canPlay === 'maybe') {
            video.src = url;
          } else {
            instance.value.notice.show = 'cannot play m3u8';
          }
        }
      },
    },
  })

  nextTick(()=>{
    emmit('get-instance', instance.value)

    instance.value.on('error', error => {
      console.log(error)
    })
  })
})

onBeforeUnmount(()=>{
  if (instance.value && instance.value.destroy) {
    instance.value.destroy(false);
  }
})
</script>

[zhw2590582]

It seems to be a compatibility issue between the Composition API of vite and hls.js, but you can use the traditional optional api: https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/vue3.js

[msghaderi77]

Thanks for your response.
Yes, it seems to be an HLS problem, and recording to this link: video-dev/hls.js#5146 (comment) can be fixed by changing HLS import to this: import Hls from 'hls.js/dist/hls.min'