implement hls.js library with vuejs project

Question

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 component

export default {
  head() {
     return {
       script: [
         {
           src: 'https://cdn.jsdelivr.net/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.

7hny · Answer 1 · 2020-11-19T22:10:04.597

5

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

Here is how you can use it in a component:

<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.com/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>

edited Nov 19 '20 at 22:10

answered Nov 19 '20 at 21:18

7hny

991
1
11
9

hey @7hny "this" is not available here in the hls.on event listener, correct? how could I inject hls.js so that I could use it like $hls? – mahatmanich Oct 27 '21 at 08:26
1

Use arrow function: `hls.on(Hls.Events.MANIFEST_PARSED, () => { video.play(); });` – 7hny Nov 10 '21 at 11:08
https://stackoverflow.com/questions/69752158/nuxt-plugin-cannot-access-vues-this-instance-in-function-blocks I managed it like this thank you! – mahatmanich Nov 10 '21 at 11:09

score 0 · Answer 2 · answered May 29 '23 at 09:11

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"
  />

implement hls.js library with vuejs project

2 Answers2