benchmark.html

<!DOCTYPE html>
<html>
  <head>
    <title>I HEART VIDEO - The Benchmarker</title>
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css" />
    <script src="scripts/benchmark.js" type="text/javascript"></script>
  </head>
  <body>
    <div>
      <span id="title">I <span class="heart">HEART</span> VIDEO</span>
      <span id="subtitle">by <a href="http://www.github.com/ascherkus/">ascherkus</a>
          (code on <a href="http://www.github.com/ascherkus/iheartvideo">github</a>)</span>
    </div>

    <table>
      <tr>
        <td><label for="url_input">URL:</label></td>
        <td>
          <input id="url_input" type="text" size="64" />
          <select id="test_select">
            <option selected value="all">All tests (x5)</option>
            <option value="cached">Cached</option>
            <option value="uncached">Uncached</option>
            <option value="short">Short seek</option>
            <option value="long">Long seek</option>
          </select>
          <button id="url_button" onclick="runTests()">Run</button>
        </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td class="desc">
          Enter an audio/video URL to benchmark.<br><br>
          PROTIP: use url= and test= query parameters to run tests automatically. URLs should be
          encoded and the test parameter must be one of <b>all</b>, <b>cached</b>, <b>uncached</b>,
          <b>short</b>, or <b>long</b>.<br>
        </td>
      </tr>
    </table>

    <!-- Used for benchmarking. -->
    <video autoplay id="v" style="display:none"></video>

    <p>

    <div style="font-family:monospace; font-weight: bold">The Logbox</div>
    <div id="l" style="white-space: pre; width: 400px; font-family:monospace; border: solid 1px gray"></div>

    <script>
      var v = document.getElementById('v');
      var l = document.getElementById('l');

      var tests = {
        'all': function(src) {
          var perf = new Benchmark(v, src);

          perf.testCached(5, function(avg) {
            log('Cached: ' + avg);

            perf.testUncached(5, function(avg) {
              log('Uncached: ' + avg);

              perf.testShortSeek(5, function(avg) {
                log('Short seek: ' + avg);

                perf.testLongSeek(5, function(avg) {
                  log('Long seek: ' + avg);
                  log('');
                });
              });
            });
          });
        },

        'cached': function(src) {
          var perf = new Benchmark(v, src);
          perf.testCached(1, function(avg) {
            log('Cached: ' + avg);
          });
        },

        'uncached': function(src) {
          var perf = new Benchmark(v, src);
          perf.testUncached(1, function(avg) {
            log('Uncached: ' + avg);
          });
        },

        'short': function(src) {
          var perf = new Benchmark(v, src);
          perf.testShortSeek(1, function(avg) {
            log('Short seek: ' + avg);
          });
        },

        'long': function(src) {
          var perf = new Benchmark(v, src);
          perf.testLongSeek(1, function(avg) {
            log('Long seek: ' + avg);
          });
        }
      };

      function log(text) {
        l.innerText = l.innerText + text + '\n';
        console.log(text);
      }

      function runTests() {
        var src = document.getElementById('url_input').value;
        var test = document.getElementById('test_select').value;

        // Run the selected test.
        tests[test](src);
      }

      function getQueryParams(url) {
        var query = url.split('?');
        var result = {};
        if (query.length <= 1) {
          return result;
        }
        query = query[1].split('&');
        for (var i = 0; i < query.length; ++i) {
          var keyvalue = query[i].split('=');
          result[keyvalue[0]] = decodeURIComponent(keyvalue[1]);
        }
        return result;
      }

      var params = getQueryParams(window.location.href);
      if (params.url && params.test) {
        document.getElementById('url_input').value = params.url;
        document.getElementById('test_select').value = params.test;
        runTests();
      }
    </script>
  </body>
</html>