Add control button to switch to a different HLS stream manually?

[hanfeisun]

Sometimes the adaptive streaming doesn't works so well.

For example, a patient viewer can tolerate the long buffering time to watch a HD(1080p) video, but adaptive streaming will assign him/her a low-quality video automatically..

I was wondering whether there is a recommended way in videojs-contrib-hls to switch HLS stream manually..

[namor]

+1 here

[andrewho83]

+1

[dmlap]

We don't have a way of doing that right now short of overriding adaptive streaming entirely but it's something we'd definitely like to add.

[villos]

+1

[halibegic]

+1

[mkhazov]

+1

videojs-resolution-switcher plugin has videojs-contrib-hls support (on branch), but it works with some flaws.

Also there is videojs-quality-picker which can be integrated manually

[halibegic]

I'm end up using https://github.com/streamroot/videojs5-hlsjs-source-handler (based on Dailymotion's hls.js library)

To enable bitrate selection use player.qualityPickerPlugin().

[talk2cerlin]

@halibegic : any sample implementations for this plugin?

[halibegic]

@talk2cerlin https://halibegic.github.io/hls/

[talk2cerlin]

@halibegic : thanks for the link. May i know what these two files are?

<script src="js/hls.min.js"></script>
<script src="js/vjs-hls.min.js"></script>

[halibegic]

@talk2cerlin

hls.min.js => https://github.com/dailymotion/hls.js/tree/master
vjs-hls.min.js => https://github.com/streamroot/videojs5-hlsjs-source-handler

[ironweber]

So I've been able to change qualities by just changing the source to one of the playlists on hls.playlists.master.playlists.

var currentTime = player.currentTime();
var src = player.sources[level].src;

player.src({
  src: src,
  type: 'application/x-mpegURL'
});
player.currentTime(currentTime);
player.play();

To switch back to auto I just reload the master.m3u8 playlist again. Probably not optimal but it gets the job done until manual level switching is actually implemented.

[gesinger]

We have since added https://github.com/videojs/videojs-contrib-quality-levels , which is a plugin that provides an easy API for enabling/disabling quality levels. If you see any issues with this plugin, please let us know. Thanks!

[rohityadav876]

@gesinger can you just let us know how to use that plugin, I tried to use it but getting nothing to be in the player menu.

The HTML I am using:-
<video id="player-video" width=600 height=300 class="video-js vjs-default-skin" controls> </video>

JS :-

<script>
var options = {
             "playbackRates": [.25,.5,1, 1.5, 2],
             "preload":'auto',
             controlBar: {
                             volumeMenuButton: {
                                 vertical: true,
                                 inline: false,
                                 volumeBar: {
                                     vertical: true
                                 },
                                 volumeLevel: true
                             }

                       }
             };
      var player = videojs('player-video', options);
      player.src({
        src: "https://573c827e6926e.streamlock.net/geography_optional/smil:11_1_2017_GeoOpt.smil/playlist.m3u8",
        type: 'application/x-mpegURL',
      });
      player.qualityLevels();
      player.play();
      var qualityLevels = player.qualityLevels();
      for (var i = 0; i < qualityLevels.length; i++) {
                  var quality = qualityLevels[i];
                   console.log(quality);
          if (quality.width >= 720) {
                                                 quality.enabled = true;
                                                 } else {
                                                            quality.enabled = false;
                                                            }
        }
    </script>

I am using video.js V5.18.0, videojs-contrib-hls V5.3.2 and videojs-contrib-quality-levels.js v 2.0.3

But I am getting nothing on the menu of the player.
Please let me know how to get it done.

[forbesjo]

This is similar to this issue (videojs/videojs-contrib-quality-levels#13), the resolution was to listen to the addqualitylevel event because player.qualityLevels() is not populated yet. We will update the repo's instructions for clarity.

[salvaaod]

@halibegic the sample at http://halibegic.info/p/hls/ is not working anymore, can you upload it again ?

Thanks.

[halibegic]

@salvaaod https://halibegic.github.io/hls/

[kuzroman]

Hello everybody! @halibegic or somebody can say why your sample does't work on my android 7?
Is it really make button for phones (ios, android)?
I am used plugin videojs-contrib-quality-levels and it work only in desktop, why?

[salvaaod]

Hi, tried the sample on Windows (Chrome) and works fine the quality selection button is there, but on Android and iOS seems not to have any effect and there is no quality select button.

Any idea why ?

[DarkMatterCore]

I thought it would be OK to share my solution as well:

<script type="text/javascript" src="jquery-2.1.1.js"></script>
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<script src="https://unpkg.com/videojs-flash/dist/videojs-flash.min.js"></script>
<script src="https://unpkg.com/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.min.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.min.js"></script>
<script>
	var options = {
		html5:{
			hls:{
				enableLowInitialPlaylist:true
			}
		},
		flash:{
			hls:{
				enableLowInitialPlaylist:true
			}
		},
		inactivityTimeout:0,
		controls:true,
		autoplay:true,
		preload:"auto",
	};
	
	var player = videojs('example-video', options);
	
	var qLevels = [];
	
	player.qualityLevels().on('addqualitylevel', function(event) {
		var quality = event.qualityLevel;
		console.log(quality);
		
		if (quality.height != undefined && $.inArray(quality.height, qLevels) === -1)
		{
			quality.enabled = true;
			
			qLevels.push(quality.height);
			
			if (!$('.quality_ul').length)
			{
				var h = '<div class="quality_setting vjs-menu-button vjs-menu-button-popup vjs-control vjs-button">' +
						'<button class="vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Quality" aria-haspopup="true" aria-expanded="false">' +
						'<span aria-hidden="true" class="vjs-icon-cog"></span>' +
						'<span class="vjs-control-text">Quality</span></button>' +
						'<div class="vjs-menu"><ul class="quality_ul vjs-menu-content" role="menu"></ul></div></div>';
				
				$(".vjs-fullscreen-control").before(h);
			} else {
				$('.quality_ul').empty();
			}
			
			qLevels.sort();
			qLevels.reverse();
			
			var j = 0;
			
			$.each(qLevels, function(i, val) {
				$(".quality_ul").append('<li class="vjs-menu-item" tabindex="' + i + '" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="false" bitrate="' + val +
										'"><span class="vjs-menu-item-text">' + val + 'p</span></li>');
				
				j = i;
			});
			
			$(".quality_ul").append('<li class="vjs-menu-item vjs-selected" tabindex="' + (j + 1) + '" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="true" bitrate="auto">' +
									'<span class="vjs-menu-item-text">Auto</span></li>');
		}
	});
	
	$("body").on("click", ".quality_ul li", function() {
		$(".quality_ul li").removeClass("vjs-selected");
		$(".quality_ul li").prop("aria-checked", "false");
		
		$(this).addClass("vjs-selected");
		$(this).prop("aria-checked", "true");
		
		var val = $(this).attr("bitrate");
		
		var qualityLevels = player.qualityLevels();
		
		for (var i = 0; i < qualityLevels.length; i++)
		{
			qualityLevels[i].enabled = (val == "auto" || (val != "auto" && qualityLevels[i].height == val));
		}
	});
</script>

I suppose you could say it is a little bit 'hack-ish', but it works.

[ndhao94]

@halibegic sorry, I'm newbie and I met the trouble. I can't use grunt to create vjs-hls.min.js from https://github.com/streamroot/videojs5-hlsjs-source-handler like what you did. Can you give me some suggestion or tutorial to create this file. Thank you!

[halibegic]

Hi @ndhao94

Just run the npm install command and after that npm run build.
You should get the the dist directory and videojs-hlsjs-plugin.js inside it.
Here is the dist directory dist.zip

[ndhao94]

@halibegic oh, What a surprise. Last night I did not sleep to build index.html just like you.
But even I included 2 file hls.js and videojs-hlsjs-plugin.js into index.html. I still do not see button for changing bitrate level.
I used this tool to convert .mp4 file to .m3u8: https://github.com/Hemisphere-Project/HLS-segmenter
What am I missing something?

[ndhao94]

huh. I have checked console and found an error: Uncaught TypeError: player.qualityPickerPlugin is not a function!!!

[halibegic]

You need to include vjs-quality-picker.js. You can download it from the https://github.com/streamroot/videojs-quality-picker and run the command npm install, npm run build.

In case you need dist directory dist-videojs-quality-picker.zip

[IvanBue]

@DarkMatterCore How can I make it reproduce the highest possible quality in your code? Thank you