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> 109
