Changing the stream quality

[yusuftuncay]

Hello! I'm trying to get stream quality to work, currently I'm using this plugin. It works well, except for the quality changing by itself altough I set it to highest by default (and even changing it manually to something else changes this automatically to highest after a while which is fine). But my question was, is there a way to lock the selection? So if the user chooses 720p, that it stays on it regardless of their internet speed?

Another thing is that on Safari, the plugin won't even load, which I couldn't understand why (but it does default to highest like the plugin settings)

I'm using VideoJS and below is my initialization code:

export function setupVideoPlayer() {
    // Set up the video player with configuration
    const config = {
        controlBar: {
            volumePanel: { inline: false },
        },
        plugins: {
            hlsQualitySelector: {
                displayCurrentQuality: true,
                largestResolutionFirst: true,
                disableAutoQuality: true,
                defaultQuality: 1080,
            },
        },
    };

    // Create the video player instance with the configuration
    const player = videojs("videoplayer", config);

    // Return the player instance
    return player;
}

And this is how I load the stream:

// Fetch the episodes data
const episodeData = await fetchDataWithRedBackgroundColor(
    `https://<url>/api/v2/hianime/episode/sources?animeEpisodeId=...`
);

// Set the video source using the M3U8 proxy
const sourceUrl = episodeData.data.sources[0].url;
const referer = "https://megacloud.club/";
const headers = { Referer: referer };
const playerSrc = `https://<url>/m3u8-proxy?url=${encodeURIComponent(sourceUrl)}&headers=${encodeURIComponent(JSON.stringify(headers))}`;
player.src({
    src: playerSrc,
    type: "application/x-mpegURL",
});

I am not familiar with the specifics like streams so I couldn't figure it out.

Any help is appreciated!