| <!DOCTYPE html> |
| <html lang='en-US'> |
| <head> |
| <title>EME playback test application</title> |
| </head> |
| <body style='font-family:"Lucida Console", Monaco, monospace; font-size:14px'> |
| <i>Clearkey works only with content encrypted using bear key.</i><br><br> |
| <table> |
| <tr title='URL param mediaFile=...'> |
| <td><label for='mediaFile'>Encrypted video URL:</label></td> |
| <td><input id='mediaFile' type='text' size='64'></td> |
| </tr> |
| <tr title='URL param licenseServerURL=...'> |
| <td><label for='licenseServer'>License sever URL:</label></td> |
| <td><input id='licenseServer' type='text' size='64'></td> |
| </tr> |
| <tr title='URL param keySystem=...'> |
| <td><label for='keySystemList'>Key system:</label></td> |
| <td><select id='keySystemList'></select></td> |
| </tr> |
| <tr title='URL param mediaType=...'> |
| <td><label for='mediaTypeList'>Media type:</label></td> |
| <td><select id='mediaTypeList'></select></td> |
| </tr> |
| <tr title='URL param usePrefixedEME=1|0'> |
| <td><label for='usePrefixedEME'>EME API version:</label></td> |
| <td><select id='usePrefixedEME'></select></td> |
| </tr> |
| <tr title='URL param useMSE=1|0'> |
| <td><label for='useMSE'>Load media by:</label></td> |
| <td> |
| <select id='useMSE'> |
| <option value='true' selected='selected'>MSE</option> |
| <option value='false'>src</option> |
| </select> |
| </td> |
| </tr> |
| </table> |
| <br> |
| <button onclick='Play();'>Play</button> |
| <br><br> |
| Decoded fps: <span id='decodedFPS'></span> |
| <br> |
| Dropped fps: <span id='droppedFPS'></span> |
| <br> |
| Total dropped frames: <span id='droppedFrames'></span> |
| <br><br> |
| <table> |
| <tr> |
| <td valign='top'><span id='video'></span></td> |
| <td valign='top'> |
| <label for='logs' onclick="toggleDisplay('logs');"><i>Click to toggle logs visibility (newest at top).</i><br></label> |
| <div id='logs' style='overflow: auto; height: 480px; width: 480px; white-space: nowrap; display: none'></div> |
| </td> |
| </tr> |
| </table> |
| <div></div> |
| </body> |
| <script src='eme_player_js/app_loader.js' type='text/javascript'></script> |
| <script type='text/javascript'> |
| var testConfig = new TestConfig(); |
| testConfig.loadQueryParams(); |
| // Update document with test configuration values. |
| var emeApp = new EMEApp(testConfig); |
| |
| function onTimeUpdate(e) { |
| var video = e.target; |
| if (video.currentTime < 1) |
| return; |
| // For loadSession() tests, addKey() will not be called after |
| // loadSession() (the key is loaded internally). Do not check keyadded |
| // and heartbeat for these tests. |
| if (!testConfig.sessionToLoad) { |
| // keyadded may be fired around the start of playback; check for it |
| // after a delay to avoid timing issues. |
| if (testConfig.usePrefixedEME && !video.receivedKeyAdded) |
| Utils.failTest('Key added event not received.'); |
| if (testConfig.keySystem == EXTERNAL_CLEARKEY && |
| !video.receivedHeartbeat) |
| Utils.failTest('Heartbeat keymessage event not received.'); |
| } |
| video.removeEventListener('ended', Utils.failTest); |
| Utils.installTitleEventHandler(video, 'ended'); |
| video.removeEventListener('timeupdate', onTimeUpdate); |
| } |
| |
| function Play() { |
| // Update test configuration with UI elements values. |
| var video = emeApp.createPlayer().video; |
| Utils.resetTitleChange(); |
| // Ended should not fire before onTimeUpdate. |
| video.addEventListener('ended', Utils.failTest); |
| video.addEventListener('timeupdate', onTimeUpdate); |
| video.play(); |
| } |
| |
| function toggleDisplay(id) { |
| var element = document.getElementById(id); |
| if (!element) |
| return; |
| if (element.style['display'] != 'none') |
| element.style['display'] = 'none'; |
| else |
| element.style['display'] = ''; |
| } |
| Play(); |
| </script> |
| </html> |