I need some help trying to figure out how to use the hls.js library in vuejs as it has no specific documentation of how to implement it with vue. The situation here is that I have to fetch the m3u8 from an api I'm able to make it work from a basic html with the tag and cdn but when I try to implement it with vuejs it doesn't work, any help is appreciated. I've tried 2 implementations and got the same error each time. These are what I've got so far:

First try: use cdn and include in it ponent

export default {
  head() {
     return {
       script: [
         {
           src: '.js@latest'
         }
       ],
     }
   }}

with function in created()

    checkHLS(){
      console.log('in');
      if (Hls.isSupported()) {
        console.log('working')
      }
    },

Second Try install the package using npm

npm install --save hls.js

and i got this error

                                  Hls is not defined
An error occurred while rendering the page. Check developer tools console for details.

I need some help trying to figure out how to use the hls.js library in vuejs as it has no specific documentation of how to implement it with vue. The situation here is that I have to fetch the m3u8 from an api I'm able to make it work from a basic html with the tag and cdn but when I try to implement it with vuejs it doesn't work, any help is appreciated. I've tried 2 implementations and got the same error each time. These are what I've got so far:

First try: use cdn and include in it ponent

export default {
  head() {
     return {
       script: [
         {
           src: 'https://cdn.jsdelivr/npm/hls.js@latest'
         }
       ],
     }
   }}

with function in created()

    checkHLS(){
      console.log('in');
      if (Hls.isSupported()) {
        console.log('working')
      }
    },

Second Try install the package using npm

npm install --save hls.js

and i got this error

                                  Hls is not defined
An error occurred while rendering the page. Check developer tools console for details.

• javascript
• vue.js
• http-live-streaming
• hls.js

2 Answers 2

Install hls.js via npm: npm i --save hls.js@latest

Here is how you can use it in a ponent:

<template>
  <video ref="video" width="100%" height="640" controls></video>
</template>

<script>
import Hls from 'hls.js';

export default {
  mounted() {
    let hls = new Hls();
    let stream = "http://demo.unified-streaming./video/tears-of-steel/tears-of-steel.ism/.m3u8";
    let video = this.$refs["video"];
    hls.loadSource(stream);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      video.play();
    });
  },
};
</script>

You can try npm module for working with m3u8 video. This package works with vue3

vue-hls-video-player

Probably, this module could solve your problem

  npm i vue-hls-video-player

  <VideoPlayer
    type="default"
    @pause="processPause"
    previewImageLink="poster.webp"
    link="videoLink.m3u8"
    :progress="30"
    class="customClassName"
  />

  <VideoPlayer
    type="preview"
    previewImageLink="poster.webp"
    link="videoLink.m3u8"
    class="customClassName"
  />