Add custom loaders structure

[progre]

ref: #294

Usage:

1. Create your own loader (example)

2. Create player;

flvJS.createPlayer(
  {
    type: 'flv',
    isLive: true,
  },
  {
    loader: new ObservableLoader(source),
  },
);

[xqq]

Very glad to receive this pull request from you.

The custom loader should be passed with a class (aka. Constructor), because in VOD mode:

• IOController will re-create a new loader to recover loading if detected a network Early-EOF
• IOController will re-create a new loader when need to resume loading from a paused state
• For multipart playback, IOController will create a new loader for every MediaSegment

Rename the field name in Config loader to be customLoader will be better.

[progre]

OK. I replaced a instance of custom loader with a constructor.

So, it's usage was changed like this;

flvJS.createPlayer(
  {
    type: 'flv',
    isLive: true,
  },
  {
    customLoader: ObservableLoader,
    customLoaderParameters: myCustomParams,
  },
);

[xqq]

If extra parameters are needed for custom loader's constructor, I think using closure to wrap the constructor may solve it.

But why customLoaderParameters is not yet used?

[progre]

hmm... I don't know how to wrap constructor using closure.
Can you tell me how to do it?

[xqq]

function init() {
    let extraParam = null;

    function createObservableLoader(seekHandler, config) {
        return new ObservableLoader(extraParam, seekHandler, config);
    }
    
    flvjs.createPlayer({
        type: 'flv',
        isLive: true
    }, {
        customLoader: createObservableLoader
    });
}

このようにできるかも

[progre]

I see. Certainly, It seems to be possible.
I removed the parameter in type definition.

[xqq]

https://github.com/Bilibili/flv.js/pull/307/files#diff-e7b9ff559443937e9bb0f0932a5d11dbR232
How do you think about it?

[progre]

Range can be used to extend BaseLoader#open;

import flvJS, { MediaSegment, Range } from 'flv.js';
...
class MyCustomLoader extends flvJS.BaseLoader {
  open(dataSource: MediaSegment, range: Range) {
...

(but I don't use range parameter yet. So I don't need it.)

[xqq]

I think it is accessible through the namespace FlvJs... aka FlvJs.MediaSegment / FlvJs.Range.
I'm not familiar with TypeScript so probably wrong.

[progre]

hmm.. It can this way;

export declare namespace FlvJs {
...

but, This is need import like this. I think this is a little ugly.

import flvJS, { FlvJs } from 'flv.js';

[xqq]

Merged, thanks!

I will manually remove the exported type until found other solutions to refactor the d.ts.

[xqq]

#310

[xqq]

WHY USE CHINESE IN SUCH A PURE ENGLISH PULL REQUEST?

[melodysummer]

a new learner... ok, I'll explain it in English.
flv.js supports the customloader config? @xqq