Integrate the hls.js library into a Vue.js application

Can anyone assist me with understanding how to utilize the hls.js library in vuejs? There isn't specific documentation on how to implement it with vue, and I'm struggling. My issue arises when trying to fetch the m3u8 from an api - while I can make it work with basic HTML using the tag and CDN, it fails when implementing it with Vuejs. Any help would be greatly appreciated. I've attempted two different implementations, but encountered the same error each time. Here's what I have tried so far:

First attempt: using CDNs and including it in the 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 Attempt: installing the package using npm

npm install --save hls.js

but then I received this error

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

Answer №1

To set up hls.js using npm, follow these steps: npm i --save hls.js@latest

Implementing hls.js in a component is as shown below:

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

Answer №2

If you're looking to work with m3u8 video files, consider using the npm module designed specifically for this purpose and compatible with vue3.

Check out vue-hls-video-player

It's possible that integrating this module could help address your issue.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I set up flat-pickr for date and time input with Vue.js?

I'm currently working with flat-pickr. Let's dive into the configuration part of it. I have a start date field and an end date field. My goal is to make it so that when a time is selected in the start date field, it defaults to 12h AM, and when a ...

Learn to implement data binding with multiple array inputs in Vue.js

When using Vue.js for form input, I encountered an issue with my new form. Unlike a single input where the v-model and data binding work perfectly, they seem to fail on this new form. You can view the form structure below: In this new form, the v-model do ...

Using Javascript to dynamically add an element to an array with a unique index

Given let inputArray = []; $('some_selector').each(function() { let outer, inner; outer=$(this).parent().attr('some_property'); inner=$(this).attr('a_property'); if (!inputArray[outer]) inputArray[outer] = ...

Filtering with checkboxes (looking for help with logic functionality)

Yesterday, I sought assistance with a similar question and was able to make progress based on the response provided. However, I have encountered another issue that has left me stuck. Current behavior: Clicking on a checkbox changes the background color of ...

Create a surplus of information

I'm currently working on a project where I need to replicate all the entries multiple times and then have them spin and gradually land on a color. However, I'm encountering an issue with duplicating the colors without increasing the width. How ca ...

Bootstrap typehead not activating jQuery AJAX request

I am attempting to create a Twitter Bootstrap typehead using Ajax, but nothing seems to be happening. There are no errors and no output being generated. Here is the jQuery Ajax code I have implemented: function CallData() { $('input.typeahea ...

Using Flask to instantaneously respond to asynchronous Node.js await calls

I offer two different services, service A which is based on Node.js and service B which uses Flask. There is an endpoint on service A that calls the endpoint of service B in the following manner: const response = await axios.get( endpoint_url ...

Sharing data in JavaScript functions

In order to use certain variables in two separate functions, there are some considerations to keep in mind. The first function is responsible for calculating and displaying a conjugated verb using these variables. The second function checks the user's ...

What's the best way to integrate Bootstrap into my HTML document?

Hey there, I'm new to the coding world and just started learning. I could use some assistance with including Bootstrap v5.1 in my HTML code. The online course I'm taking is using an older version of Bootstrap, so I'm having trouble finding t ...

Implementing Avro file deserialization in a React application

I could really use some assistance with deserializing an avro file in a react application. I attempted to use the avsc npm package, but now I have encountered an error. const avro = require('avsc') ...... avro.createFileDecoder('./abc.avro&a ...

Unusual jQuery error notification

Short Receiving Error in syntax, unrecognized expression: [object Object] @ jquery.js:4267 This code snippet is from jQ: Sizzle.error = function( msg ) { throw new Error( "Error in syntax, unrecognized expression: " + msg ); // Line 4267 }; Detaile ...

Incorporating an event listener for 'storage' in jQuery using JavaScript

Can anyone tell me how to achieve the same functionality as javascript addEventListener in JQuery? I have been attempting to use it with .bind(), but it seems not to recognize the "storage" keyword. When I tried using 'e' within this context, it ...

template for displaying data in Vue.js using props

In my application, I have a component that I frequently use to display tables. Now, I want to enhance this component by allowing the customization of table fields (templates) through props in the parent component. This way, I can avoid constant edits to th ...

The functionality of Webdriver.waitUntil is not meeting the expected outcomes

I'm currently utilizing webdriverio version 4.5: ./node_modules/.bin/wdio -v v4.5.2 In my scenario, I am in need of waiting for the existence of a specific element and handling the situation if it doesn't exist. Here is an example code snippet ...

I've encountered some issues with importing pagination from modules after installing SwiperJs

Having some issues with importing pagination from modules in SwiperJs for my nextjs project. The error message "Module not found: Package path ./modules is not exported from package" keeps popping up. I have tried updating the module to the latest version ...

Displaying various Ajax html responses

The function $('.my-button').click(function(e) is designed to display the output of the MySQL query in display.php, presented in HTML format. While it functions correctly, since each button is looped for every post, the script only works for the ...

Expanding div width with jQuery as a percentage

Currently, I am facing a dilemma as I try to devise an equation for expanding the width of a div based on its current height. The Scenario Within this situation, there is a div that features a background image set to "contain." The original background ima ...

Tips on retrieving the ID value

My goal is to access the value of the 'id' property in a component. Below is my attempt: constructor(props) { super(props); this.state = { ...

What is the best way to implement a Facebook share button using the Facebook Javascript SDK within an Ajax request?

In my Rails application, I have implemented the following code in an Ajax call: <script type="text/javascript"> $(document).on('click','#share_button', function(e){ e.preventDefault(); FB.ui({ method: &apo ...

How can I determine which component the input is coming from when I have several components of the same type?

After selecting two dates and clicking submit in the daterange picker, a callback function is triggered. I have two separate daterange pickers for SIM dates and Phone dates. How can I differentiate in the callback function when the user submits dates from ...