media/test/data/eme_player.html

   1 <!DOCTYPE html>
   2 <html lang='en-US'>
   3   <head>
   4     <title>EME playback test application</title>
   5   </head>
   6   <body style='font-family:"Lucida Console", Monaco, monospace; font-size:14px'>
   7     <i>Clearkey works only with content encrypted using bear key.</i><br><br>
   8     <table>
   9     <tr title='URL param mediaFile=...'>
  10       <td><label for='mediaFile'>Encrypted video URL:</label></td>
  11       <td><input id='mediaFile' type='text' size='64'></td>
  12     </tr>
  13     <tr title='URL param licenseServerURL=...'>
  14       <td><label for='licenseServer'>License sever URL:</label></td>
  15       <td><input id='licenseServer' type='text' size='64'></td>
  16     </tr>
  17     <tr title='URL param keySystem=...'>
  18       <td><label for='keySystemList'>Key system:</label></td>
  19       <td><select id='keySystemList'></select></td>
  20     </tr>
  21     <tr title='URL param mediaType=...'>
  22       <td><label for='mediaTypeList'>Media type:</label></td>
  23       <td><select id='mediaTypeList'></select></td>
  24     </tr>
  25     <tr title='URL param usePrefixedEME=1|0'>
  26       <td><label for='usePrefixedEME'>EME API version:</label></td>
  27       <td><select id='usePrefixedEME'></select></td>
  28     </tr>
  29     <tr title='URL param useMSE=1|0'>
  30       <td><label for='useMSE'>Load media by:</label></td>
  31       <td>
  32         <select id='useMSE'>
  33           <option value='true' selected='selected'>MSE</option>
  34           <option value='false'>src</option>
  35         </select>
  36       </td>
  37     </tr>
  38     </table>
  39     <br>
  40     <button onclick='Play();'>Play</button>
  41     <br><br>
  42     Decoded fps: <span id='decodedFPS'></span>
  43     <br>
  44     Dropped fps: <span id='droppedFPS'></span>
  45     <br>
  46     Total dropped frames: <span id='droppedFrames'></span>
  47     <br><br>
  48     <table>
  49     <tr>
  50       <td valign='top'><span id='video'></span></td>
  51       <td valign='top'>
  52         <label for='logs' onclick="toggleDisplay('logs');"><i>Click to toggle logs visibility (newest at top).</i><br></label>
  53         <div id='logs' style='overflow: auto; height: 480px; width: 480px; white-space: nowrap; display: none'></div>
  54       </td>
  55     </tr>
  56     </table>
  57     <div></div>
  58   </body>
  59   <script src='eme_player_js/app_loader.js' type='text/javascript'></script>
  60   <script type='text/javascript'>
  61     var testConfig = new TestConfig();
  62     testConfig.loadQueryParams();
  63     // Update document with test configuration values.
  64     var emeApp = new EMEApp(testConfig);
  65
  66     function onTimeUpdate(e) {
  67       var video = e.target;
  68       if (video.currentTime < 1)
  69         return;
  70       // For loadSession() tests, addKey() will not be called after
  71       // loadSession() (the key is loaded internally). Do not check keyadded
  72       // and heartbeat for these tests.
  73       if (!testConfig.sessionToLoad) {
  74         // keyadded may be fired around the start of playback; check for it
  75         // after a delay to avoid timing issues.
  76         if (testConfig.usePrefixedEME && !video.receivedKeyAdded)
  77           Utils.failTest('Key added event not received.');
  78         if (testConfig.keySystem == EXTERNAL_CLEARKEY &&
  79             !video.receivedHeartbeat)
  80           Utils.failTest('Heartbeat keymessage event not received.');
  81       }
  82       video.removeEventListener('ended', Utils.failTest);
  83       Utils.installTitleEventHandler(video, 'ended');
  84       video.removeEventListener('timeupdate', onTimeUpdate);
  85     }
  86
  87     function Play() {
  88       // Update test configuration with UI elements values.
  89       var video = emeApp.createPlayer().video;
  90       Utils.resetTitleChange();
  91       // Ended should not fire before onTimeUpdate.
  92       video.addEventListener('ended', Utils.failTest);
  93       video.addEventListener('timeupdate', onTimeUpdate);
  94       video.play();
  95     }
  96
  97     function toggleDisplay(id) {
  98       var element = document.getElementById(id);
  99       if (!element)
 100         return;
 101       if (element.style['display'] != 'none')
 102         element.style['display'] = 'none';
 103       else
 104         element.style['display'] = '';
 105     }
 106     Play();
 107   </script>
 108 </html>