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