The only way I am aware of boosting audio past 100% with the Video JS library is to setup a slightly janky custom audio context with a gain node. This makes changing the playback rate not work. I understand that player.tech() is not really intended to be used but it seems like this is the only way to boost audio volume.

Is there something I am doing wrong here? If so what is the best way be able to both boost volume past 100 as well as control playback rate?

const normal = videojs('normal', { "playbackRates": [1, 4] });
    const boosted = videojs('boosted', { "playbackRates": [1, 4], enableSourceset: true });
    boosted.on("sourceset", () => {
      const context = new window.AudioContext();
      const gain = context.createGain();
      context.createMediaElementSource(boosted.tech().el()).connect(gain);
      gain.connect(context.destination);
      gain.gain.value = 10;
    });

With VideoJS:

https://codepen.io/qhyun2/pen/gOgPKqP

Without:

https://codepen.io/qhyun2/pen/abpZmMB

Solved!

This is a bug in Firefox

You need to resume() the AudioContext from within a click handler. The following should work.

const context = new window.AudioContext();
const boosted = videojs(
    'boosted',
    {
        enableSourceset: true,
        playbackRates: [1, 4]
    }
);

boosted.on("play", () => context.resume());
boosted.on("sourceset", () => {
    const gain = context.createGain();

    context.createMediaElementSource(boosted.tech().el())
        .connect(gain)
        .connect(context.destination);

    gain.gain.value = 10;
});

However it doesn't work on codepen.io. The video file isn't served with the necessary CORS headers.