Skip to content

Instantly share code, notes, and snippets.

@ssaguiar

ssaguiar/gist:bf5d1f80fe630f46844f551c810ca5c8

Created August 29, 2018 20:39
Show Gist options
  • Save ssaguiar/bf5d1f80fe630f46844f551c810ca5c8 to your computer and use it in GitHub Desktop.
Save ssaguiar/bf5d1f80fe630f46844f551c810ca5c8 to your computer and use it in GitHub Desktop.
Download ZIP
Simple 20 channels mosaic using hls.js
Raw
gistfile1.txt
<div id="carousel"><video id="video01" width="320" height="180" controls muted></video><div id="buttonscontainer"><p>Channel Test01</p><button type="button" onclick="alert('Button Channel 1')"><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
<script>
if(Hls.isSupported()) {
var video01 = document.getElementById('video01');
video01.setAttribute("controls","controls")
var hls = new Hls();
hls.loadSource('http://0.0.0.0/live/playlist.m3u8');
hls.attachMedia(video01);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video01.play();
});
}
</script>
@ssaguiar
Copy link
Author

ssaguiar commented Aug 31, 2018 •
edited
Loading

<!doctype html>

<title>hls.js demo</title> 
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">

<script type='text/javascript' src='js/hls.js'></script>
<script type='text/javascript' src='js/jquery-1.11.2.js'></script>
<script type='text/javascript' src="js/funcoes.js"></script>


<style type="text/css">
	body{
		background-color: #000000;
		padding: 0;
		margin: 0;
		margin-top: 20px;
	}

	#carousel {
		width: 320px;
		height: 220px;
		padding: 0;
		margin: 10px 2px 0 0;
		background-color: #000000;
		display: inline-block;
	}

	#buttonscontainer {
		position: relative;
		width: 316px;
		height: 40px;
		padding-top:1px;
		padding-left:2px;
		padding-right:2px;
		background-color: #202020;
	}

	p {
		text-align: left;
		color: #FFBF00;
		font-family: Proxima Nova,-apple-system,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
		font-size: 14px;
		line-height: 1.35;
		padding-left: 4px;
		padding-top: 0px;
		margin-right: 90px;
	}

	button {
		background-color: transparent;
		color: #ffffff;
		position: absolute;
		top: 0;
		right: 0;
		margin: auto;
		width: 80px;
		height: 30px;
		font-size: 12px;
		line-height: 1.5;
		border: 1px solid rgba(167, 146, 129, 0.4);
		border-radius: 3px;
		margin-right: 10px;
		margin-top: 5px;
		cursor: pointer;
	}

	.clearfix {
		overflow: auto;
	}

	.rightfloat {
		float: right;
		width: 300px;
		border: 3px solid #73AD21;
		padding: 10px;
	}

	.rightabsolute {
		position: absolute;
		right: 0px;
		width: 300px;
		border: 3px solid #73AD21;
		padding: 10px;
	}

	imgcentered {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 40%;
	}

	.centereddiv {
		margin: auto;
		width: 50%;
		border: 3px solid green;
		padding: 10px;
	}

	button:hover {
		opacity: 0.5;
		border: 1px solid rgba(167, 146, 129, 1);
	}

	.pannel {
		margin: auto;
		width: 90%;
		background-color: #303030;
		border: 1px solid rgba(167, 146, 129, 0.4);
		padding: 0px;
	}

	.heading {
		margin: auto;
		/*border: 1px solid rgba(167, 146, 129, 0.4);*/
		border-bottom: 1px solid rgba(167, 146, 129, 0.4);
		margin:4px;
		padding: 4px;
		text-align: left;
		color: #FFBF00;
		font-family: Proxima Nova,-apple-system,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
		font-size: 20px;
		line-height: 1.35;
	}

</style>

	<div class="pannel">
		<div class="heading">Streams Monitor</div>
			<div class="col-xs-12">
				<div class="form-group">
					<div class="col-xs-12">
						<center>
						<div id="carousel"><video id="video01" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test01</p><button type="button" onclick="alert('Button Channel 1')"><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video02" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test02</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video03" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test03</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video04" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test04</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video05" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test05</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video06" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test06</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video07" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test07</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video08" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test08</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video09" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test09</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video10" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test10</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video11" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test11</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video12" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test12</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video13" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test13</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video14" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test14</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video15" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test15</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video16" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test16</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video17" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test17</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video18" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test18</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video19" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test19</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						<div id="carousel"><video id="video20" width="320" height="180" poster="poster.png" controls muted></video><div id="buttonscontainer"><p>Channel Test20</p><button type="button" onclick=""><i class="fa fa-sync-alt" aria-hidden="true"></i> Restart</button></div></div>
						</center>
					</div>
					<div class="col-xs-1">
					</div>
					<div class="col-xs-10">
						<small><p id="clock" style="text-align:right; background-color: #303030;"></p></small>
					</div>
					<div class="col-xs-1">

					</div>
				</div>
			</div>
		</div>

<script>
  if(Hls.isSupported()) {
	var video01 = document.getElementById('video01');
	video01.setAttribute("controls","controls");
	var hls01 = new Hls({liveMaxBackBufferLength: 30});
	hls01.loadSource('http://0.0.0.0/live/2347_TEST01/pipplaylist.m3u8');
	hls01.attachMedia(video01);
	hls01.on(Hls.Events.MANIFEST_PARSED,function() {
	  video01.play();
  });

  	var video02 = document.getElementById('video02');
	video02.setAttribute("controls","controls");
	var hls02 = new Hls({liveMaxBackBufferLength: 30});
	hls02.loadSource('http://0.0.0.0/live/2347_TEST02/pipplaylist.m3u8');
	hls02.attachMedia(video02);
	hls02.on(Hls.Events.MANIFEST_PARSED,function() {
	  video02.play();
  });

  	var video03 = document.getElementById('video03');
	video03.setAttribute("controls","controls");
	var hls03 = new Hls({liveMaxBackBufferLength: 30});
	hls03.loadSource('http://0.0.0.0/live/2347_TEST03/pipplaylist.m3u8');
	hls03.attachMedia(video03);
	hls03.on(Hls.Events.MANIFEST_PARSED,function() {
	  video03.play();
  });

  	var video04 = document.getElementById('video04');
	video04.setAttribute("controls","controls");
	var hls04 = new Hls({liveMaxBackBufferLength: 30});
	hls04.loadSource('http://0.0.0.0/live/2347_TEST04/pipplaylist.m3u8');
	hls04.attachMedia(video04);
	hls04.on(Hls.Events.MANIFEST_PARSED,function() {
	  video04.play();
  });

  	var video05 = document.getElementById('video05');
	video05.setAttribute("controls","controls");
	var hls05 = new Hls({liveMaxBackBufferLength: 30});
	hls05.loadSource('http://0.0.0.0/live/2347_TEST05/pipplaylist.m3u8');
	hls05.attachMedia(video05);
	hls05.on(Hls.Events.MANIFEST_PARSED,function() {
	  video05.play();
  });

  	var video06 = document.getElementById('video06');
	video06.setAttribute("controls","controls");
	var hls06 = new Hls({liveMaxBackBufferLength: 30});
	hls06.loadSource('http://0.0.0.0/live/2347_TEST06/pipplaylist.m3u8');
	hls06.attachMedia(video06);
	hls06.on(Hls.Events.MANIFEST_PARSED,function() {
	  video06.play();
  });

  	var video07 = document.getElementById('video07');
	video07.setAttribute("controls","controls");
	var hls07 = new Hls({liveMaxBackBufferLength: 30});
	hls07.loadSource('http://0.0.0.0/live/2347_TEST07/pipplaylist.m3u8');
	hls07.attachMedia(video07);
	hls07.on(Hls.Events.MANIFEST_PARSED,function() {
	  video07.play();
  });

  	var video08 = document.getElementById('video08');
	video08.setAttribute("controls","controls");
	var hls08 = new Hls({liveMaxBackBufferLength: 30});
	hls08.loadSource('http://0.0.0.0/live/2347_TEST08/pipplaylist.m3u8');
	hls08.attachMedia(video08);
	hls08.on(Hls.Events.MANIFEST_PARSED,function() {
	  video08.play();
  });

  	var video09 = document.getElementById('video09');
	video09.setAttribute("controls","controls");
	var hls09 = new Hls({liveMaxBackBufferLength: 30});
	hls09.loadSource('http://0.0.0.0/live/2347_TEST09/pipplaylist.m3u8');
	hls09.attachMedia(video09);
	hls09.on(Hls.Events.MANIFEST_PARSED,function() {
	  video09.play();
  });

  	var video10 = document.getElementById('video10');
	video10.setAttribute("controls","controls");
	var hls10 = new Hls({liveMaxBackBufferLength: 30});
	hls10.loadSource('http://0.0.0.0/live/2347_TEST10/pipplaylist.m3u8');
	hls10.attachMedia(video10);
	hls10.on(Hls.Events.MANIFEST_PARSED,function() {
	  video10.play();
  });

  	var video11 = document.getElementById('video11');
	video11.setAttribute("controls","controls");
	var hls11 = new Hls({liveMaxBackBufferLength: 30});
	hls11.loadSource('http://0.0.0.0/live/2347_TEST11/pipplaylist.m3u8');
	hls11.attachMedia(video11);
	hls11.on(Hls.Events.MANIFEST_PARSED,function() {
	  video11.play();
  });

  	var video12 = document.getElementById('video12');
	video12.setAttribute("controls","controls");
	var hls12 = new Hls({liveMaxBackBufferLength: 30});
	hls12.loadSource('http://0.0.0.0/live/2347_TEST12/pipplaylist.m3u8');
	hls12.attachMedia(video12);
	hls12.on(Hls.Events.MANIFEST_PARSED,function() {
	  video12.play();
  });

  	var video13 = document.getElementById('video13');
	video13.setAttribute("controls","controls");
	var hls13 = new Hls({liveMaxBackBufferLength: 30});
	hls13.loadSource('http://0.0.0.0/live/2347_TEST13/pipplaylist.m3u8');
	hls13.attachMedia(video13);
	hls13.on(Hls.Events.MANIFEST_PARSED,function() {
	  video13.play();
  });

  	var video14 = document.getElementById('video14');
	video14.setAttribute("controls","controls");
	var hls14 = new Hls({liveMaxBackBufferLength: 30});
	hls14.loadSource('http://0.0.0.0/live/2347_TEST14/pipplaylist.m3u8');
	hls14.attachMedia(video14);
	hls14.on(Hls.Events.MANIFEST_PARSED,function() {
	  video14.play();
  });

  	var video15 = document.getElementById('video15');
	video15.setAttribute("controls","controls");
	var hls15 = new Hls({liveMaxBackBufferLength: 30});
	hls15.loadSource('http://0.0.0.0/live/2347_TEST15/pipplaylist.m3u8');
	hls15.attachMedia(video15);
	hls15.on(Hls.Events.MANIFEST_PARSED,function() {
	  video15.play();
  });

  	var video16 = document.getElementById('video16');
	video16.setAttribute("controls","controls");
	var hls16 = new Hls({liveMaxBackBufferLength: 30});
	hls16.loadSource('http://0.0.0.0/live/2347_TEST16/pipplaylist.m3u8');
	hls16.attachMedia(video16);
	hls16.on(Hls.Events.MANIFEST_PARSED,function() {
	  video16.play();
  });

  	var video17 = document.getElementById('video17');
	video17.setAttribute("controls","controls");
	var hls17 = new Hls({liveMaxBackBufferLength: 30});
	hls17.loadSource('http://0.0.0.0/live/2347_TEST16/pipplaylist.m3u8');
	hls17.attachMedia(video17);
	hls17.on(Hls.Events.MANIFEST_PARSED,function() {
	  video17.play();
  });

  	var video18 = document.getElementById('video18');
	video18.setAttribute("controls","controls");
	var hls18 = new Hls({liveMaxBackBufferLength: 30});
	hls18.loadSource('http://0.0.0.0/live/2347_TEST16/pipplaylist.m3u8');
	hls18.attachMedia(video18);
	hls18.on(Hls.Events.MANIFEST_PARSED,function() {
	  video18.play();
  });

  	var video19 = document.getElementById('video19');
	video19.setAttribute("controls","controls");
	var hls19 = new Hls({liveMaxBackBufferLength: 30});
	hls19.loadSource('http://0.0.0.0/live/2347_TEST16/pipplaylist.m3u8');
	hls19.attachMedia(video19);
	hls19.on(Hls.Events.MANIFEST_PARSED,function() {
	  video19.play();
  });

  	var video20 = document.getElementById('video20');
	video20.setAttribute("controls","controls");
	var hls20 = new Hls({liveMaxBackBufferLength: 30});
	hls20.loadSource('http://0.0.0.0/live/2347_TEST16/pipplaylist.m3u8');
	hls20.attachMedia(video20);
	hls20.on(Hls.Events.MANIFEST_PARSED,function() {
	  video20.play();
  });
 } 


</script>
</center>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment