Hello,How to customize a fLoader?

[skerhub]

What do you want to do with Hls.js?

I want to customize a fLoader to handle ts slicing

What have you tried so far?

No response

[skerhub]

I don't understand this document how to operate

[robwalch]

The CMCD controller shows an example of extending the built-in Loader (XHR, Fetch, or even a custom Loader) assigned to fLoader:

hls.js/src/controller/cmcd-controller.ts

Line 53 in 0216391

config.fLoader = this.createFragmentLoader();

hls.js/src/controller/cmcd-controller.ts

Lines 373 to 408 in 0216391

	private createFragmentLoader(): FragmentLoaderConstructor | undefined {
	const { fLoader } = this.config;
	const apply = this.applyFragmentData;
	const Ctor = fLoader || (this.config.loader as FragmentLoaderConstructor);
	return class CmcdFragmentLoader {
	private loader: Loader<FragmentLoaderContext>;
	constructor(config: HlsConfig) {
	this.loader = new Ctor(config);
	}
	get stats() {
	return this.loader.stats;
	}
	get context() {
	return this.loader.context;
	}
	destroy() {
	this.loader.destroy();
	}
	abort() {
	this.loader.abort();
	}
	load(
	context: FragmentLoaderContext,
	config: LoaderConfiguration,
	callbacks: LoaderCallbacks<FragmentLoaderContext>,
	) {
	apply(context);
	this.loader.load(context, config, callbacks);
	}

Documentation: https://github.com/video-dev/hls.js/blob/master/docs/API.md#floader

It works by setting the player config fLoader to a class that implements Loader:

hls.js/src/types/loader.ts

Lines 144 to 165 in 0216391

	export interface Loader<T extends LoaderContext> {
	destroy(): void;
	abort(): void;
	load(
	context: T,
	config: LoaderConfiguration,
	callbacks: LoaderCallbacks<T>,
	): void;
	/**
	* `getCacheAge()` is called by hls.js to get the duration that a given object
	* has been sitting in a cache proxy when playing live. If implemented,
	* this should return a value in seconds.
	*
	* For HTTP based loaders, this should return the contents of the "age" header.
	*
	* @returns time object being lodaded
	*/
	getCacheAge?: () => number | null;
	getResponseHeader?: (name: string) => string | null;
	context: T | null;
	stats: LoaderStats;
	}

The two built-in classes that implement this interface are FetchLoader:

hls.js/src/utils/fetch-loader.ts

Line 33 in 0216391

class FetchLoader implements Loader<LoaderContext> {

and XhrLoader:

hls.js/src/utils/xhr-loader.ts

Line 16 in 0216391

class XhrLoader implements Loader<LoaderContext> {