canalplus / rx-player

DASH/Smooth HTML5 Video Player
https://developers.canal-plus.com/rx-player/
Apache License 2.0
852 stars 126 forks source link

[QUESTION] How to use `Multiple Threading` via UMD package? #1480

Closed KunXi-Fox closed 1 month ago

KunXi-Fox commented 1 month ago

Hi there,

I'm working for a streaming company and we supports more than one player for DASH, rx-player is one of it. Base on that we're taking a approach that download the player library when we decide to use it to play. Thanks to rx-player that provides the way to bundle the package to UMD and we can access it via window.RxPlayer. Recently we're trying to introduce the MULTI_THREADING feature from rx-player, from reading the current implementation, seems there's no way I can get MULTI_THREAD after I download the bundled rx-player.js file, so I can't call RxPlayer.addFeature([MULTI_THREAD]) to enable MULTI_THREADING.

Is there a way/plan to export all the features to somewhere so that I can access it by download the bundled script ?

peaBerberian commented 1 month ago

Hi @KunXi-Fox,

For now, we're not adding experimental features to our bundles.

I guess that technically we could be providing those features as bundle themselves so they could be added through RxPlayer.addFeature but it would lead to a lot of single feature bundles and no shared code between them like we automatically have today when relying on ES6 import instead.

Many bundlers I know (webpack, rollup, bundlers relying on some of them like vite) have features to allow the loading of JS chunks on demand. The in-JS syntax for this usually rely on ES6 dynamic import (e.g. const RxPlayer = await import("rx-player") ) so most other JavaScript tools are compatible with it.

Here's what I found for webpack: https://webpack.js.org/guides/code-splitting/#dynamic-imports For rollup: https://rollupjs.org/tutorial/#code-splitting (seems to also be valid for vite)

We know some applications at Canal+ relying on this to be able to lazily load our player (here also, they have different players based on the content to play - e.g. RxPlayer for DASH, JS wrappers for native players on some devices etc.).

So here, you could be dynamically importing the npm-hosted package and profit from all features. Is that a possibility on your side?

KunXi-Fox commented 1 month ago

Thanks for your answer @peaBerberian.

Yeah, what I'm doing currently is fork your repo and made some changes (export worker related features on Player class) on index.ts, and bundle the customized rx-player file, it works perfect now.

KunXi-Fox commented 1 month ago

dynamic import is another way I will try later, before that, I get another question:

is addFeatures been designed to allow call multiple times?

Player.addFeatures([
  SMOOTH,
  DASH,
  DIRECTFILE,
  EME,
  NATIVE_TTML_PARSER,
  NATIVE_SAMI_PARSER,
  NATIVE_VTT_PARSER,
  NATIVE_SRT_PARSER,
  HTML_TTML_PARSER,
  HTML_SAMI_PARSER,
  HTML_VTT_PARSER,
  HTML_SRT_PARSER,
]);

const MULTI_THREAD = await import("rx-player-mutiple-thread");

Player.addFeatures([MULTI_THREAD]);
peaBerberian commented 1 month ago

is addFeatures been designed to allow call multiple times?

Yes, you can call addFeatures even after instantiating a RxPlayer and loading video. You just basically need to add the feature before you load the content that relies on it.

KunXi-Fox commented 1 month ago

Thanks for your answer.