Responsive HLS

A responsive HLS video stream using the html5 video tag with the help of the hls.js library and Foundation CSS.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<script src="http://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dashjs/2.5.0/dash.all.min.js"></script>
<script src="http://192.168.249.229:8554/getStreamList?streamList"></script>
	<!--fill streamList variable with the list of streams -->
<script src="http://192.168.249.229:8554/getStreamList?streamList" ></script> -->
	<h3>HLS</h3>
	<video controls id="hlsvideo"></video>
	<h3>MPEG-DASH</h3>
	<video controls id="dashvideo"></video>

JavaScript

if (Hls.isSupported()) {
  var video = document.getElementById("hlsvideo");
  var hls = new Hls();
  hls.loadSource(streamList[0]+".m3u8");
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, function() { video.play(); });
} else {
  document.body.innerHtml = "HLS not supported";
}


var player = new dashjs.MediaPlayer().create();
player.initialize(document.getElementById("dashvideo"),streamList[0]+".mpd",true);