What is the process for enabling HLS.js to retrieve data from the server side?

I have successfully implemented a video player using hls.js, and I have some ts files stored in https:/// along with an m3u8 file.

To read the content of the m3u8 file, I used PHP to fetch it and sent the data to JavaScript (res["manifest"] = the content of m3u8), and then passed it into hls.loadSource(), as shown below:

var manifest = res["manifest"];
var blob = new Blob([manifest]);
var hls = new Hls();
var url = URL.createObjectURL(blob);

hls.loadSource(url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
    video.load();
});

After this, hls began fetching the files listed in the m3u8 document using the following format:

blob:https://<my domain>/<video name>.mp4

However, since the actual files are located at:

https://<my domain>/<video name>.mp4

View request log

The URLs starting with "blob:" are created by URL.createObjectURL in the front-end. I now want to configure hls to send requests to video.php, which will then read the ts files and respond with their contents from the server side.

Is there any method to achieve this? (such as modifying the source code or changing settings)

javascriptajaxstreamingbackendhttp-live-streaming

Answer №1

I'm so proud of what I've accomplished.

I made changes to the source code in src/loader/fragment.ts as shown below:

@@ -78,9 +78,7 @@ export class BaseSegment {
 
   get url(): string {
     if (!this._url && this.baseurl && this.relurl) {
-      this._url = buildAbsoluteURL(this.baseurl, this.relurl, {
-        alwaysNormalize: true,
-      });
+      this._url = 'video.php?f=' + this.relurl;
     }
     return this._url || '';
   }

I then recompiled with webpack. Now the get request is directed to video.php with the query parameter "f=<video name>.mp4", allowing me to handle the request in my video.php file.

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 convert the JSON array response from the API, which is of type string, back into an array?

Is there a way to change a string type array back into an array? var arr = '[ "abc", "def"]'; console.log(typeof arr) ==> String How can I convert it back into an array format? I'm receiving this string-formatted array from an API r ...

javascriptarraysjsonstring

My jQuery AJAX request is not successfully communicating with my PHP script

I am not well-versed in AJAX (or jQuery), but I believed my task was fairly straightforward. However, when attempting to send an AJAX request using: $.ajax( requestObj ); it seems to fail, and I am seeking assistance. To provide context, here is how the ...

phpjqueryajax

Understanding how to parse an array of arrays in JavaScript can be a

Looking for a function that can extract a value from an array containing multiple arrays? Simply use getValueFromArray(array, [2, 4]) to get the 4th element of the 2d array within the main array. Check out the code snippet below: function getValueFromArr ...

javascriptarraysparsingrecursion

Tips for utilizing Vue.js techniques to assign values to data properties

As a newcomer to Vue.js, I am in the process of learning how to display data retrieved from a server. In my new Vue app, I have defined a method: methods: { getData: function() { // making a request, parsing the response and pushing it to the array. ...

javascriptvue.js

Issue occurred while executing the fs.rename() function in a loop in Node.js

I'm currently working on a project that involves organizing uploaded files into folders based on their request ID. I am using express-request-id to retrieve this ID. The issue I am facing is that whenever there are multiple files to be moved, the pro ...

javascriptnode.jsexpressmulter

Retrieve the chosen selection from a dropdown menu using AngularJS and Ionic

I've been encountering some issues with the select feature in AngularJS. Despite searching extensively for solutions, none seem to be working for me. The JSON structure I'm dealing with is generated from my service.php: [ { "Name": ...

javascriptphpjsonangularjsionic-framework

Implement lazy loading functionality in Django to dynamically load data as the user scrolls

Currently, I am developing a web application using Django to showcase the interface and how content is loaded. In my database, there could potentially be thousands of entries, and I am looking for a way to load only a certain number at a time to minimize ...

javascriptpythonajaxdjango

Why does the UseEffect hook in next.js result in 2 fetch requests instead of the expected 1?

I am encountering an issue where my code is triggering two requests to my API using the GET endpoint. Unfortunately, my understanding of useEffect() is not deep enough to pinpoint where the problem lies. I want to avoid putting unnecessary strain on the ...

javascriptreactjsnext.jsfetch-api

How to make an entire video clickable on Android for seamless playback?

I have implemented an HTML5 video in my mobile web application. Currently, users need to click the small play icon at the bottom left of the video to start playing it. Is there a way to make the entire video clickable so it plays when clicked anywhere on t ...

javascriptjqueryhtmlvideomobile

Utilize Node.js to simultaneously connect with several APIs

Consider a scenario where multiple APIs need to be called in parallel using promise.all(). The issue arises when promise.all() rejects if any API fails. In this case, instead of giving up on failed APIs, I want to retry them until they succeed. However, ...

javascriptnode.js

Buttons in HTML function properly on desktop but are ineffective on mobile devices

My website is almost complete, but I am facing some challenges with the mobile version. All buttons that use JavaScript are not functioning properly, whereas buttons with simple links work perfectly fine. This issue doesn't occur on Chrome when using ...

javascripthtml

What could be the reason for not receiving any response from my Firestore query?

Hey there! I'm delving into the world of Firebase for the first time and just set up the Firestore emulator. I've added some data that I want to fetch in my Nextjs app. Once I initialized firebase, this is what my component code looks like: funct ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Unpredictable preset inline styles for HTML input elements

While developing a full-stack MERN application, I encountered an unusual issue when inspecting my React UI in Chrome DevTools. If any of these dependencies are playing a role, below are the ones installed that might be contributing to this problem: Tail ...

javascriptreactjsmaterial-uitailwind-css

Is it necessary for me to master React in order to code with React Native?

As I move on to learning React and/or React Native after mastering Angular, it feels like a natural progression in my development journey. My understanding is that React Native could streamline the process of building Android/iOS native apps within one pr ...

javascriptangularjsreactjsreact-native

Tips for navigating through a webpage by scrolling

My goal is to automatically scroll down to the bottom of the page and then perform a specific action. With the help of uiautomator, I was able to retrieve the following information: index=2, resource-id=com.manoramaonline.arogyam:id/pager,class=android.sup ...

javascriptselenium-webdriverappium

Adjust the text size for groupBy and option labels in Material UI Autocomplete without altering the size of the input field

Currently, I am utilizing Material-UI and ReactJS to implement grouped autocomplete functionality. See the code snippet below: import * as React from "react"; import TextField from "@mui/material/TextField"; import Autocomplete from &q ...

javascriptreactjsmaterial-ui

Tips for displaying a Bootstrap 5 popover triggered by a select option change event

I'm using a select box with 4 options, and I have set it up so that when the user clicks on one of the options, a Bootstrap 5 popover is triggered dynamically upon the change event. Fiddle: https://jsfiddle.net/mayursutariya93/qjeg5r9b/6/ Here' ...

javascriptjquerytwitter-bootstrappopover

Incorporating a RadAjaxManager within a user control is recommended to have only one manager for each page

Trying to add the RadAjaxManager to your page multiple times is a common mistake: Only one instance of a RadAjaxManager can be added to the page Telerik provides an explanation on how to address this issue for design-time problems using a proxy control ...

c#asp.netajaxtelerik

Submit the form using AJAX because columns are not permitted

Currently, I have designed a form dedicated to managing the notification recipients for an additional web application. The process is quite straightforward: users are added or removed from receiving notifications. In the removal section, there is a jQuery ...

jqueryajaxoraclecoldfusion

Utilizing ReactJS to display a new screen post-login using a form, extracting information from Express JSON

I am facing a challenge with updating the page on my SPA application after a successful login. I have successfully sent the form data to the API using a proxy, but now the API responds with a user_ID in JSON format. However, I'm struggling with making ...

javascriptnode.jsreactjsexpressjsx