index.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pushy/1.0.0/css/pushy.css">
</head>

<body style="margin:0; overflow:hidden; background-color:#000">
<nav class="pushy pushy-left">
    <ul>
    </ul>
</nav>
<div class="site-overlay"></div>

<div id="container">
    <div class="menu-btn">&#9776; Channels</div>
    <video id="video" style="width:100%; height:100%"></video>
</div>

<script>
var hls = new Hls();
var video = document.getElementById('video');

function set_channel(c) {
  hls.destroy();
  hls = new Hls();
  hls.attachMedia(video);
  hls.on(Hls.Events.MEDIA_ATTACHED, function () {
	hls.loadSource(c);
  });
  video.play();
  setTimeout(function() { video.play();  }, 1000);
}

if (Hls.isSupported()) {
  $.get("/channels.json",function(sources) {
    $.each(sources, function(k,source) {
      var sublist = $('<li><span>' + k + '</span><ul></ul></li>');
      $.each(source, function(cname,curl) {
        var cbtn = $('<li class="pushy-link"><a href="#">' + cname + '</a></li>');
        cbtn.click(function() {
          set_channel(curl);
        });
        $(sublist.find('ul')).append(cbtn);
      });
      $(".pushy > ul").append(sublist);
    });
    $(".pushy-link").first().click();
    var script = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pushy/1.0.0/js/pushy.min.js';
    $("body").append(script);
  });
}
document.onclick = function() {
    video.play(); 
}
</script>


<style>
.menu-btn{
  width: 100px;
  padding: 10px;
  margin-bottom: 30px;
  background: #000;
  color: #FFF;
  text-align: center;
  cursor: pointer;
  position:fixed;
  z-index:99;
}
.menu-btn:hover{
background: #00b4ff;
}
.pushy ul {
 list-style-type: none;
 padding: 10px;
}
.pushy {
  color: #FFF;
}
</style>

</body>
</html>