feat: integrate hlsjs with videojs-contrib-quality-levels

[gkatsev]

See https://github.com/gkatsev/videojs-mux-kit/pull/1 for some comments on this.

The package-lock update is big because I used node 16, and it ships with npm 8, so, a major lockfile revision. I can downgrade to node 14? And regenerate it if that would be better.

[dylanjha]

This works 🙌🏼

[AdrianMrn]

It's not immediately clear to me how to activate this plugin in a JS file, I just get plugin "httpSourceSelector" does not exist in the console.

I've tried importing the 2 mentioned libraries and placing them in my bundler config's entry files, but the error stays the same. Any ideas?

[gkatsev]

@AdrianMrn what bundler are you using? Your question made me realize that you likely need to configure your bundler similarly to how videojs-mux-kit is configured for the Video.js plugins to work with the default import of mux-kit. You'd need to alias video.js to video.js/core, which is done like so in webpack in this project https://github.com/muxinc/videojs-mux-kit/blob/bed7fcfa25569e0b791574cea7ce638e8ac69e1f/webpack.common.js#L30-L32

Alternatively, you can change your import to import the VHS build, which theoretically won't require fiddling with your bundler.

[AdrianMrn]

@gkatsev I'm using Vite to bundle a React application. Under the hood, Vite uses Rollup.

Neither the alias nor the different import makes a change for me. Am I supposed to add anything else in the config to get the quality selector to display? I've got this now:

import videojs from '@mux/videojs-kit/dist/index.vhs.js';
import '@mux/videojs-kit/dist/index.css';
import 'videojs-http-source-selector';
import 'videojs-contrib-quality-levels';

videojs(videoElement, {
    plugins: {
        httpSourceSelector: { default: 'auto' },
    },
});

This results in this error in the console:

I'm on 0.9.2 of @mux/videojs-kit.

[gkatsev]

Interesting, I would've expected things to work with the index.vhs.js without any configurations. We'll definitely investigate this more. Fixing the default import may not be possible in the short term without aliasing on your part (or updating the plugins), but the index.vhs.js should be do-able.