summaryrefslogtreecommitdiffstats
path: root/media/test/data/eme_player.html
blob: 65c120ff61ae9fd58305460b7ec4a1de17301b16 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!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>