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' onload="start()">
   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='start();'>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;
  62     var emeApp;
  63     var player;
  64     var heartbeatCount = 0;
  65
  66     function initApp() {
  67       testConfig = new TestConfig();
  68       testConfig.loadQueryParams();
  69       // Update document with test configuration values.
  70       emeApp = new EMEApp(testConfig);
  71       setInterval(function () {
  72                       Utils.timeLog('heartbeat #' + ++heartbeatCount);
  73                   }, 1000);
  74     }
  75
  76     function onTimeUpdate(e) {
  77       var video = e.target;
  78       Utils.timeLog('timeupdate @ ' + video.currentTime);
  79       if (video.currentTime < 1)
  80         return;
  81       // For loadSession() tests, addKey() will not be called after
  82       // loadSession() (the key is loaded internally). Do not check keyadded
  83       // and renewal message for these tests.
  84       if (!testConfig.sessionToLoad) {
  85         // keyadded may be fired around the start of playback; check for it
  86         // after a delay to avoid timing issues.
  87         if (testConfig.usePrefixedEME && !video.receivedKeyAdded)
  88           Utils.failTest('Key added event not received.');
  89         if (testConfig.keySystem == EXTERNAL_CLEARKEY &&
  90             !video.receivedRenewalMessage)
  91           Utils.failTest('license-renewal message not received.');
  92       }
  93       Utils.timeLog('waiting for video to end.');
  94       video.removeEventListener('ended', Utils.failTest);
  95       Utils.installTitleEventHandler(video, 'ended');
  96       video.removeEventListener('timeupdate', onTimeUpdate);
  97     }
  98
  99     function onFirstPlayEnded(e) {
 100       Utils.timeLog('First play ended.');
 101       var video = e.target;
 102       video.removeEventListener('ended', onFirstPlayEnded);
 103       video.removeEventListener('abort', Utils.failTest);
 104
 105       // Reset src (to same video again).
 106       PlayerUtils.setVideoSource(player);
 107
 108       // Play the video a second time.
 109       Utils.timeLog('Playing second time.');
 110       play(video, false);
 111     }
 112
 113     function play(video, playTwice) {
 114       Utils.resetTitleChange();
 115       if (playTwice) {
 116         // Wait for the first play to complete.
 117         video.addEventListener('ended', onFirstPlayEnded);
 118         video.play();
 119         return;
 120       }
 121       // Ended should not fire before onTimeUpdate.
 122       video.addEventListener('ended', Utils.failTest);
 123       video.addEventListener('timeupdate', onTimeUpdate);
 124       video.play();
 125     }
 126
 127     function toggleDisplay(id) {
 128       var element = document.getElementById(id);
 129       if (!element)
 130         return;
 131       if (element.style['display'] != 'none')
 132         element.style['display'] = 'none';
 133       else
 134         element.style['display'] = '';
 135     }
 136
 137     function start() {
 138       initApp();
 139       emeApp.createPlayer()
 140           .then(function(p) {
 141               player = p;
 142               play(player.video, testConfig.playTwice);
 143           }).catch(function(error) {
 144               Utils.failTest('Unable to play video.');
 145           });
 146     }
 147   </script>
 148 </html>