HLS QUALITY SELECTOR not working!

[mansishah1496]

Uncaught TypeError: player.hlsQualitySelector is not a function at (index):27 Getting the above error while integrating the hlsQualitySelector

[chrisboustead]

Can you add any additional detail? Browser/device/os?

[Arametheus]

Getting the same issue..
Mac. Apache, Php 7.4, Chrome: Version 79.0.3945.117 (Official Build) (64-bit).

npm install "videojs-hls-quality-selector": "^1.1.0",

import 'videojs-hls-quality-selector';

this.player = videojs(this.$refs.videoPlayer, this.playerOptions, function onPlayerReady() { console.log('onPlayerReady', this); });

this.player.hlsQualitySelector();

Error "TypeError: this.player.hlsQualitySelector is not a function"

when I log this.player. I do not see the hlsQualitySelector function.

if you need any other info let me know, I attached the two files I'm using for testing.

VideoPlayer_Files.zip

[chrisboustead]

Hi @Arametheus, This is not an issue with the plugin, but more likely a bundler specific error. Even though you've imported the plugin code, it won't just become available to the player on it's own. Also be sure you're including the videojs-contrib-quality-levels plugin.

Try something like the below:

import videojs from 'video.js';
import 'video.js/dist/video-js.css'
import 'videojs-contrib-quality-levels';
import videojsqualityselector from 'videojs-hls-quality-selector';

const el = document.querySelector('.video-js');
var player = videojs(el, {
    aspectRatio: '16:9',
    fluid: true,
    sources: [{
        src: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
        type: 'application/x-mpegURL'
    }]
});
player.hlsQualitySelector = videojsqualityselector;
player.hlsQualitySelector();

[Arametheus]

Thanks Chris I will check it out. I figured it was something I was doing.

[parthbhodia]

@Arametheus I had the same doubt! can you please share how did you solve it ??

[dikamilo]

This solved the issue for me:

import videojs from "video.js";
import "videojs-contrib-quality-levels";
import hlsQualitySelector from "videojs-hls-quality-selector";

videojs.registerPlugin("hlsQualitySelector", hlsQualitySelector);

[Kishoremt]

@Arametheus did you got solution for the issue, i'm also facing same issue @chrisboustead fix helped to resolve the issue but quality selector option is not showing in the video

package.json "dependencies": { "core-js": "^3.8.3", "video.js": "^8.3.0", "videojs-age-limit-icon": "^1.0.0", "videojs-contrib-quality-levels": "^4.0.0", "videojs-hls-quality-selector": "^1.1.4", "videojs-overlay": "^3.1.0", "vue": "^3.2.13" },

[Arametheus]

@Kishoremt I actually didn't I ended up going back to my old cdn code that worked just fine. I'm re doing my control panel so hopefully when I get to it I will get it figure out.

[asifmrony]

This solved the issue for me (when upgraded to video.js ^8.3.0):

import videojs from "video.js";
import "videojs-contrib-quality-levels";
import hlsQualitySelector from "videojs-hls-quality-selector";

videojs.registerPlugin("hlsQualitySelector", hlsQualitySelector);

[Kishoremt]

@asifmrony which version of "videojs-hls-quality-selector" plugin you are using? i couldn't get it as a working below is the code snippet

import videojs from 'video.js'; import "videojs-overlay"; import qualityLevels from "videojs-contrib-quality-levels"; import videojsqualityselector from 'videojs-hls-quality-selector';

mounted() { videojs.registerPlugin('qualityLevels',qualityLevels); this.player = videojs(this.$refs.videoPlayer,this.options, () => { this.duration = this.player.on('timeupdate', function() { console.log(this.currentTime()); if(Math.round(this.currentTime()) === 20) { this.pause(); this.player.controls= false; } }); this.player.hlsQualitySelector = videojsqualityselector; this.player.hlsQualitySelector(); this.player.qualityLevels(); }) },

below is my package.json

"video.js": "^7.9.2"
"videojs-contrib-quality-levels": "^2.0.9",
"videojs-hls-quality-selector": "^1.1.1",
"vue": "^3.2.13"