Does this plugin supports HLS ?

[rohityadav876]

I am using videojs-contrib-hls for HLS, want to use a resolution switching in it, So I tried this, It working fine for .mp4 or youtube, But its not working on HLS.

Can you please help me to get it done.

My Code :-

videojs('video', { controls: true, muted: true width: 500, "playbackRates": [.25,.5,1, 1.5, 2], sources: [{ "type": "application/x-mpegURL", "src": "https://573c827e6926e.streamlock.net/pankaj_history/smil:4_1_2017_MidHistory.smil/playlist.m3u8"}], plugins: { videoJsResolutionSwitcher: { default: 'low', dynamicLabel: true } } }, function(){ var player = this; window.player = player; player.on('resolutionchange', function(){ console.info('Source changed') }) });

Please help me to get it done

[HankBrown]

Same question. Looks like we need to checkout the "hls-tech" branch. In that branch I find and example: https://github.com/kmoskwiak/videojs-resolution-switcher/blob/hls-tech/examples/hls.html

What is not clear to me is if/when/how this may or may not be merged into a master branch later. And I guess I'll cross that bridge when I come to it ;) Thank you for sharing your hard work.

[Reinbert]

HLS does work. I use "videojs-contrib-hls": "^5.5.1"

You need to keep the sources out of the videojs options and instead call player.updateSrc(sources) in the onReady callback.

[dvision1979]

Hi Reibert! I am trying to follow your hint, but it is too vague. Can you please be more specific? Are you using this tech-hls branch? How do you specify the list of sources for hls? If I do:

[...]
  }, function(){
      var player = this;
      window.player = player;
      player.updateSrc(
            {
                src: 'http://<server_address>/live/<stream_name>/index.m3u8',
                type:  'application/x-mpegURL',
                label: '1080p',
                res: 1080
            }, {hls: true}
        );
[...]

... the stream loads fine, but beats the purpose of resolution switcher. I obviously need at least 2 sources to switch between them.

Thank you for your help! Any suggestion is more than welcome.

[Reinbert]

Have you read https://github.com/kmoskwiak/videojs-resolution-switcher#setup-sources-dynamically ?

[dvision1979]

For all the others looking for a quick workaround for the master branch version to work with hls m3u8's: in the .js file around line 90 find this code:

      if(this.player_.techName_ !== 'Youtube' && this.player_.preload() === 'none' && this.player_.techName_ !== 'Flash') {
        handleSeekEvent = 'timeupdate';
      }

The trick is to force to use 'timeupdate' option. I did that by removing " && this.player_.preload() === 'none'" (notice the space at the beginning of the selection) from the conditional statement above and resulted the following code:

     if(this.player_.techName_ !== 'Youtube' &&  this.player_.techName_ !== 'Flash') {
        handleSeekEvent = 'timeupdate';

      }

Just save the .js and reload the browser and voila 😀

Happy streaming everyone! BR++, dvision

[Reinbert]

Why do you need a workaround, when you say your stream loads fine?

Btw, I'm using the following libraries in conjunction and they work just fine. "video.js": "~5.19.2", "videojs-contrib-hls": "^5.5.1", "videojs-resolution-switcher": "^0.4.2"

[wells]

I had to use the dev branch in order to get a resolution switcher menu to show for videojs-contrib-hls, as it has the functionality necessary (https://github.com/kmoskwiak/videojs-resolution-switcher/blob/dev/lib/videojs-resolution-switcher.js#L349-L415). In my case, I was loading multiple sources from a master m3u8 playlist.

"devDependencies": {
  "videojs-resolution-switcher": "kmoskwiak/videojs-resolution-switcher#dev",
}

I would gather that this plugin is no longer being maintained @kmoskwiak

Also note that this dev branch does not work correctly for a player configured with normal file sources.

<source src="..." type="video/mp4" data-quality="HD" label="HD">
<source src="..." type="video/mp4" data-quality="SD" label="SD">