Saturday, 10 September 2022

How do I install Video.js's Rangeslider plugin on Angular 13?

I'm having a hard time trying to install video.js's Rangeslider plugin in Angular 13. The problem is that the rangeslider code expects a global videojs variable to be available and alters it's prototype.

So in this moment videojs is provided by an import in my component:

import videojs from 'video.js';

And I start videojs with this code in AfterViewInit:

this.player = videojs(this.myVideoComponent.nativeElement, this.config, () => {
    console.log('player ready!');
});

Now AFAIK Rangeslider plug in doesn't have a npm package available, so I download it and imported as a normal file within my project:

import RangeSlider from 'src/app/shared/rangeslider-videojs';

This created the error videojs not found, because videojs isn't global and not even initialized;

So to be able to have videojs initialized it has to be in AfterViewInit after the initialization code mentioned above. So I tried all this:

let RangeSlider = require('src/app/shared/rangeslider-videojs');

let RangeSlider = require('src/app/shared/rangeslider-videojs')(videojs, {});

this.player.bind(require('src/app/shared/rangeslider-videojs'));

window['videojs'] = require('src/app/shared/rangeslider-videojs');

With equal results. I CAN put videojs and rangeslider files directly in root dir and use <script> tags to load it the hard way. But that would be so ugly I'm very relutant in doing it.

Anyone knows a way to load rangeslider plugin on an Angular component ?



from How do I install Video.js's Rangeslider plugin on Angular 13?

No comments:

Post a Comment