demo/metrics.html

<!DOCTYPE html>

<head>
  <title>hls.js metrics page</title>
  <link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
  />
  <link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
  />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="header-container">
    <header class="wrapper clearfix">
      <h1 class="title">hls.js metrics page</h1>
    </header>
  </div>
  <pre id="HlsDate"></pre>
  <pre id="StreamPermalink"></pre>
  <input id="metricsData" class="innerControls" type="text" value="" />
  window size
  <div id="metricsButton">
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="timeRangeSetSliding(0)"
    >
      window ALL
    </button>
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="timeRangeSetSliding(2000)"
    >
      2s
    </button>
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="timeRangeSetSliding(5000)"
    >
      5s
    </button>
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="timeRangeSetSliding(10000)"
    >
      10s
    </button>
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="timeRangeSetSliding(20000)"
    >
      20s
    </button>
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="timeRangeSetSliding(30000)"
    >
      30s
    </button>
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="timeRangeSetSliding(60000)"
    >
      60s
    </button>
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="timeRangeSetSliding(120000)"
    >
      120s</button
    ><br />
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="timeRangeZoomIn()"
    >
      Window Zoom In
    </button>
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="timeRangeZoomOut()"
    >
      Window Zoom Out</button
    ><br />
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="timeRangeSlideLeft()"
    >
      <<< Window Slide
    </button>
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="timeRangeSlideRight()"
    >
      Window Slide >>></button
    ><br />
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="windowStart=$('#windowStart').val()"
    >
      fixed window start(ms)
    </button>
    <input
      type="text"
      id="windowStart"
      defaultValue="0"
      size="8"
      onkeydown="if(window.event.keyCode=='13'){windowStart=$('#windowStart').val();}"
    />
    <button
      type="button"
      class="btn btn-xs btn-primary"
      onclick="windowEnd=$('#windowEnd').val()"
    >
      fixed window end(ms)
    </button>
    <input
      type="text"
      id="windowEnd"
      defaultValue="10000"
      size="8"
      onkeydown="if(window.event.keyCode=='13'){windowEnd=$('#windowEnd').val();}"
    /><br />
    <canvas
      id="bufferTimerange_c"
      width="640"
      height="100"
      style="border: 1px solid #000000"
      onmousedown="timeRangeCanvasonMouseDown(event)"
      onmousemove="timeRangeCanvasonMouseMove(event)"
      onmouseup="timeRangeCanvasonMouseUp(event)"
      onmouseout="timeRangeCanvasonMouseOut(event)"
      ;
    ></canvas>
    <canvas
      id="bitrateTimerange_c"
      width="640"
      height="100"
      style="border: 1px solid #000000"
      ;
    ></canvas>
    <canvas
      id="bufferWindow_c"
      width="640"
      height="100"
      style="border: 1px solid #000000"
      onmousemove="windowCanvasonMouseMove(event)"
      ;
    ></canvas>
    <canvas
      id="videoEvent_c"
      width="640"
      height="15"
      style="border: 1px solid #000000"
      ;
    ></canvas>
    <canvas
      id="loadEvent_c"
      width="640"
      height="15"
      style="border: 1px solid #000000"
      ;
    ></canvas
    ><br />
  </div>

  <script src="canvas.js"></script>
  <script src="metrics.js"></script>
  <script src="libs/jsonpack.js"></script>
  <script>
    $(document).ready(function () {
      $('#metricsData').change(function () {
        events = jsonpack.unpack(atob($('#metricsData').val()));
        updateMetrics();
      });
    });

    var data =
        location.search.split('data=')[1] || location.hash.split('data=')[1],
      events;
    if (data) {
      events = jsonpack.unpack(atob(decodeURIComponent(data)));
      updateMetrics();
    }

    function updateMetrics() {
      var hlsLink = new URL(
        'index.html?src=' + encodeURIComponent(events.url),
        window.location.href
      ).href;
      var playlistLink = document.createElement('a');
      playlistLink.setAttribute('href', events.url);
      playlistLink.textContent = events.url;

      var replayLink = document.createElement('a');
      replayLink.setAttribute('href', hlsLink);
      replayLink.textContent = hlsLink;

      var fragment = document.createDocumentFragment();
      fragment.appendChild(document.createTextNode('playlist: '));
      fragment.appendChild(playlistLink);
      fragment.appendChild(document.createElement('br'));
      fragment.appendChild(document.createTextNode('replay: '));
      fragment.appendChild(replayLink);

      $('#StreamPermalink').html(fragment);
      $('#HlsDate').text('session Start Date:' + new Date(events.t0));
      metricsDisplayed = true;
      showMetrics();
      refreshCanvas();
    }
  </script>
</body>