index.html

<!DOCTYPE html>
<html>
<head>
<title>LiveStream</title>
<meta charset=utf-8 />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/clappr.level-selector/latest/level-selector.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@joaopaulo.vieira/clappr-media-control-plugin@latest/dist/clappr-media-control-plugin.min.js"></script>
</head>
<body>
<center>
<div class="container-fluid">
    <div class="row">
    <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
        <div class="embed-responsive embed-responsive-16by9">
        <div id="player" class="embed-responsive-item"></div>
        </div>
		<script type="text/javascript">
		var playerElement = document.getElementById("player");
		var player = new Clappr.Player({
		parentId: "#player",
		source: "/hls/stream.m3u8",
		source: "/hls/stream/index.m3u8",
		poster: '/poster.jpg',
		width: '1280',
		height: '720',
		exitFullscreenOnEnd: false,
		plugins: [LevelSelector, MediaControl.MainPlugin,
				MediaControl.PlayPauseButtonPlugin,
				MediaControl.VolumePlugin,
				MediaControl.FullscreenButtonPlugin,
				MediaControl.SeekBarPlugin,
				MediaControl.LevelSelectorPlugin,
				],
			mediaControl: {
				disableBeforeVideoStarts: true,
				levelSelectorComponent: {
					layer: 1,
					section: 1,
					position: 2,
					separator: true,
					onlyShowWithClick: true,
					labels: {
						0: 'low',
						1: 'med',
						2: 'high',
						3: 'higher',
						4: 'src',
						},
					onLevelsAvailable: function(levels) { return levels.reverse() },
					}
				},
			levelSelectorConfig: {
				title: 'Quality',
				labels: {
					4: 'src',
					3: 'higher',
					2: 'high',
					1: 'med',
					0: 'low',
					},
				labelCallback: function(playbackLevel, customLabel) {
				return customLabel + playbackLevel.level.height+'p'; // High 720p
				}
			},
		});
		</script>

      </div>
    </div>
  </div>
</center>
</body>
</html>