tools/perf/page_sets/tough_video_cases/video.html

   1 <!DOCTYPE html>
   2 <html>
   3   <body>
   4   </body>
   5   <script>
   6     function getQueryStrings() {
   7       // Gets query parameters from the URL; e.g., given a URL like:
   8       //
   9       //    http://<url>/my.html?test=123&bob=456
  10       //
  11       // returns params["test"] = 123, params["bob"]=456, etc.
  12       var params = {};
  13       // RegEx to split out values by &.
  14       var r = /([^&=]+)=?([^&]*)/g;
  15       // Lambda function for decoding extracted match values. Replaces '+' with
  16       // space so decodeURIComponent functions properly.
  17       function d(s) { return decodeURIComponent(s.replace(/\+/g, ' ')); }
  18       var match;
  19       while (match = r.exec(window.location.search.substring(1)))
  20        params[d(match[1])] = d(match[2]);
  21       return params;
  22     }
  23     // Each network config = [DOWNLOAD_BANDWIDTH_Kbit/s, LATENCY_MS]
  24     // Numbers are chosen to be similar to webpagereplay/net_configs.py
  25     var netConfig = {};
  26     netConfig['cable'] = [5120, 28];
  27     netConfig['dsl'] = [1536, 50];
  28     netConfig['wifi'] = [1024, 60];
  29     netConfig['none'] = null;
  30     // Constrained network server URL.
  31     var CNS_BASE_URL = 'http://cns.chrome:9000/ServeConstrained?';
  32
  33     function getNetsimURL(net) {
  34       if (!netConfig[net])
  35         return CNS_BASE_URL;
  36       return CNS_BASE_URL + 'bandwidth=' + netConfig[net][0] +
  37           '&latency=' + netConfig[net][1]
  38     }
  39
  40     function getMediaSRC() {
  41       var mediaSRC = qsParams['src']
  42       if (qsParams['net'])
  43         return getNetsimURL(qsParams['net']) + '&new_port=True' + '&f=' +
  44                mediaSRC;
  45       return mediaSRC;
  46     }
  47
  48     function canvas2dAnimation() {
  49       canvasContext.drawImage(testElement, 0, 0, canvasElement.width, canvasElement.height);
  50       window.requestAnimationFrame(canvas2dAnimation);
  51     }
  52
  53     qsParams = getQueryStrings();
  54     var type = qsParams['type'] || 'video';
  55     var testElement = document.createElement(type);
  56     var canvasElement;
  57     var canvasContext;
  58     testElement.preload = 'none';
  59     testElement.controls = true;
  60     if (qsParams['id'])
  61       testElement.id = qsParams['id'];
  62     testElement.src = getMediaSRC();
  63     if (qsParams['canvas'] && type == 'video') {
  64       canvasElement = document.createElement('canvas');
  65       canvasElement.width = 800;
  66       canvasElement.height = 450;
  67       document.body.appendChild(canvasElement);
  68       canvasContext = canvasElement.getContext('2d');
  69       window.requestAnimationFrame(canvas2dAnimation);
  70     }
  71     document.body.appendChild(testElement);
  72   </script>
  73 </html>