src/chrome/test/data/media/html/media_scrub.html

   1 <!-- Used by media_scrub_perf to record scrubbing perf metrics. -->
   2 <!DOCTYPE html>
   3 <html lang="en-US">
   4   <head>
   5     <title>Scrubbing Tests</title>
   6     <script src="utils.js" type="text/javascript"></script>
   7   </head>
   8   <body>
   9     <label for="src">Video src (direct link to media file):</label>
  10     <input id="src" type="text" size="64">
  11     <button onclick="startTest(document.querySelector('input').value);">
  12       Start
  13     </button>
  14     <p>
  15       <video controls></video><br>
  16       Forward scrubbing time: <span id="forwardScrub"></span><br>
  17       Backward scrubbing time: <span id="backwardScrub"></span><br>
  18       Mixed scrubbing time: <span id="mixedScrub"></span><br>
  19       <span id="logs"></span>
  20     </p>
  21   <script type="text/javascript">
  22     // Number of seeks per scrub.
  23     var SCRUBS = 100;
  24     // The delta between 2 scrubs in secs.
  25     var SCRUB_DELTA = 0.1;
  26     // Used by pyauto tests to store the scrubbing times.
  27     var forwardScrubTime = backwardScrubTime = mixedScrubTime = 0;
  28     // Used for each scrub test based on buffered area.
  29     var startTime = endTime = 0;
  30     // Used by PyAuto to log any error message.
  31     var errorMsg = '';
  32     // Used by PyAuto to indicate when the test is done.
  33     var testDone = false;
  34     // Timer used to measure scrubbing performance.
  35     var timer = new Timer();
  36     // Indicates the current scrubbing direction performed.
  37     var currentDirection = null;
  38     // Indicates the expected time of video when each scrub ends.  This is the
  39     // final seek time each test performs.
  40     // Make sure none of the scrubs overlap this time.
  41     var EXPECTED_SCRUB_END_TIME = 0.01;
  42     // Seek is not 100% accurate so we need delta in secs where currentTime of
  43     // video can vary from its expected time.
  44     var DELTA = 0.0001;
  45
  46     var Direction = {
  47       FORWARD: 0,
  48       BACKWARD: 1,
  49       MIXED: 2,
  50       NO_DIRECTION: 3
  51     };
  52
  53     function log(text) {
  54       logs.innerText += text + '\n';
  55     }
  56
  57     function getAndClearElement(id) {
  58       var elem = document.getElementById(id);
  59       elem.innerText = '';
  60       return elem;
  61     }
  62
  63     function onCanplaythrough() {
  64       startTime = video.buffered.start(0) + SCRUB_DELTA;
  65       endTime = startTime + SCRUBS * SCRUB_DELTA;
  66       log('Video duration: ' + video.duration + ' secs');
  67       log('Scrubbing area: (' + startTime + ', ' + endTime + ')');
  68       currentDirection = Direction.FORWARD;
  69       startScrubTest();
  70     }
  71
  72     function startScrubTest() {
  73       timer.start();
  74       switch (currentDirection) {
  75         case Direction.FORWARD:
  76           video.currentTime = startTime;
  77           scrub(Direction.FORWARD, SCRUBS);
  78           break;
  79         case Direction.BACKWARD:
  80           video.currentTime = endTime;
  81           scrub(Direction.BACKWARD, SCRUBS);
  82           break;
  83         case Direction.MIXED:
  84           video.currentTime = (startTime + endTime) / 2;
  85           var shortScrubs = 6;
  86           for (t = 0; t < shortScrubs; ++t) {
  87             if (t % 2)
  88               scrub(Direction.BACKWARD, SCRUBS / shortScrubs);
  89             else
  90               scrub(Direction.FORWARD, SCRUBS / shortScrubs);
  91           }
  92           break;
  93         case Direction.NO_DIRECTION:
  94           endTest();
  95           video.removeEventListener('seeked', seeked, false);
  96           return;
  97       }
  98       // After each scrub, seek to the expected end time.
  99       video.currentTime = EXPECTED_SCRUB_END_TIME;
 100     }
 101
 102     function scrub(direction, scrubs) {
 103       for (var t = 0; t < scrubs; ++t) {
 104         if (direction == Direction.BACKWARD)
 105           video.currentTime -= SCRUB_DELTA;
 106         else if (direction == Direction.FORWARD)
 107           video.currentTime += SCRUB_DELTA;
 108       }
 109     }
 110
 111     function seeked() {
 112       if (Math.abs(video.currentTime - EXPECTED_SCRUB_END_TIME) < DELTA) {
 113         logScrubTime();
 114         // Update to next scrubbing direction.
 115         currentDirection++;
 116         startScrubTest();
 117       }
 118     }
 119
 120     function logScrubTime() {
 121       delta = Math.round(timer.stop(), 0);
 122       var scrubElem = null;
 123       if (currentDirection == Direction.FORWARD) {
 124         scrubElem = getAndClearElement('forwardScrub');
 125         forwardScrubTime = delta;
 126       } else if (currentDirection == Direction.BACKWARD) {
 127         scrubElem = getAndClearElement('backwardScrub');
 128         backwardScrubTime = delta;
 129       } else {
 130         scrubElem = getAndClearElement('mixedScrub');
 131         mixedScrubTime = delta;
 132       }
 133       scrubElem.innerText = delta + ' ms';
 134     }
 135
 136     function end(msg) {
 137       errorMsg = msg;
 138       log(msg);
 139       endTest();
 140     }
 141
 142     function endTest() {
 143       testDone = true;
 144     }
 145
 146     // Called by the PyAuto controller to initiate testing.
 147     function startTest(src) {
 148       video = document.querySelector('video');
 149       logs = getAndClearElement('logs');
 150       errorMsg = '';
 151       testDone = false;
 152       forwardScrubTime = backwardScrubTime = mixedScrubTime = 0;
 153
 154       video.addEventListener('seeked', seeked);
 155       video.addEventListener('canplaythrough', onCanplaythrough);
 156       video.addEventListener('error', function() {
 157         end('Error loading media: ' + video.error.code);
 158       });
 159       video.src = src;
 160
 161       if (window.domAutomationController)
 162         window.domAutomationController.send(true);
 163     }
 164   </script>
 165   </body>
 166 </html>