Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

224
Views
How to write hls.js loader?

I'm trying to make new loader for hls.js fragments, but it does not work.

Made everything by their doc (https://github.com/video-dev/hls.js/blob/master/docs/API.md#loader).

Why it's not working?

const Loader = class {

      start = Date.now();

      stats: LoadStats = {
        aborted: false,
        loaded: 0,
        retry: 0,
        total: 0,
        chunkCount: 0,
        bwEstimate: 0,
        loading: { start: this.start, first: 0, end: 0 },
        parsing: { start: this.start, end: 0 },
        buffering: { start: this.start, first: 0, end: 0 },
      };

      // @ts-ignore
      load = async (context, config, callbacks) => {

        const request = new XMLHttpRequest();

        request.open('GET', context.url, true);
        request.responseType = context.responseType;

        request.onprogress = (event: ProgressEvent) => {
          const now = Date.now();

          this.stats.loaded = event.loaded;
          this.stats.total = event.total;
          this.stats.chunkCount += 1;
          this.stats.bwEstimate = this.stats.loaded / (now - this.start);

          if (this.stats.loading.first === 0) {
            this.stats.loading.first = now;
            this.stats.buffering.first = now;
          }

          // There is no ArrayBuffer in response, XHR does not support that
          callbacks.onProgress(this.stats, context, new ArrayBuffer(0));
        };

        request.onabort = () => {
          this.stats.aborted = true;

          callbacks.onError(
            {
              code: 0,
              text: 'Error while loading of the fragment',
            },
            context,
            request
          );
        };

        request.onreadystatechange = () => {
          if (request.readyState !== 4) {
            return;
          }

          const now = Date.now();

          this.stats.loaded = request.response.byteLength;
          this.stats.total = request.response.byteLength;

          this.stats.loading.end = now;
          this.stats.parsing.end = now;
          this.stats.buffering.end = now;

          callbacks.onSuccess(
            {
              url: request.responseURL,
              data: request.response,
            },
            this.stats,
            context,
            request
          );
        };

        request.send();
      };

      /** Abort any loading in progress. */
      abort = function (): void {};

      /** Destroy loading context. */
      destroy = function (): void {};
    };

Log has a weird thing – hls.js loading all segments, one by one, from 1st to 21st, but do not buffer them, i.e. I can't play video, there is an infinite loader.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!