Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / PerformanceTests / Media / MSEPlaybackRate.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="media-source-loader.js"></script>
5 <script src="../resources/runner.js"></script>
6 <script>
7 var loader;
8
9 window.addEventListener('load', () => {
10     loader = new MediaSourceLoader('test-fragmented-video.json');
11     loader.loadMediaData().then(runTest);
12 });
13
14 function *range(start, end) {
15     while (start < end)
16         yield(start++);
17 }
18
19 function addVideos(count, autoplay) {
20     return new Promise((resolve, reject) => {
21         var promises = [];
22         var videos = [];
23         for (var i of range(0, count)) {
24             var video = document.createElement('video');
25             video.controls = false;
26             video.loop = true;
27             video.muted = true;
28             document.body.appendChild(video);
29             promises.push(loadMediaDataIntoVideo(video));
30             videos.push(video);
31         }
32         document.getElementById('video-count').innerText = videoCount();
33         Promise.all(promises).then(() => {
34             resolve(videos);
35         });
36     });
37 }
38
39 function removeVideos(count) {
40     while (count > 0) {
41         --count;
42         var video = document.querySelector('video:last-child');
43         video.src = '';
44         video.load();
45         document.body.removeChild(video);
46     }
47     document.getElementById('video-count').innerText = videoCount();
48 }
49
50 function loadMediaDataIntoVideo(video) {
51     return new Promise((resolve, reject) => {
52         var source = new MediaSource();
53         source.addEventListener('sourceopen', (e) => {
54             var source = e.target;
55             var currentMediaSegment = 0;
56             var sourceBuffer = source.addSourceBuffer(loader.type);
57             var mediaSegments = loader.mediaSegments();
58             sourceBuffer.appendBuffer(loader.initSegment);
59             sourceBuffer.addEventListener('update', () => {
60                 if (source.readyState === 'closed') {
61                     resolve(video);
62                     return;
63                 }
64                 var nextSegment = mediaSegments.next();
65                 if (nextSegment.done) {
66                     if (source.readyState !== 'ended') {
67                         source.endOfStream();
68                         resolve(video);
69                     }
70                     return;
71                 }
72
73                 sourceBuffer.appendBuffer(nextSegment.value);
74             });
75             sourceBuffer.addEventListener('error', (e) => {
76                 reject();
77             });
78         });
79         video.src = URL.createObjectURL(source);
80     });
81 }
82
83 function videoCount() {
84     return document.querySelectorAll('video').length;
85 }
86
87 function totalDroppedFrames() {
88     var total = 0;
89     for (var video of document.querySelectorAll('video')) {
90         if (typeof(video.getVideoPlaybackQuality) !== 'undefined')
91             total += video.getVideoPlaybackQuality().droppedVideoFrames;
92         else if (typeof(video.webkitDroppedFrameCount) !== 'undefined')
93             total += video.webkitDroppedFrameCount;
94     }
95     return total;
96 }
97
98 function pauseAll() {
99     for (var video of document.querySelectorAll('video'))
100         video.pause();
101 }
102
103 function playVideos(videos) {
104     return new Promise((resolve, reject) => {
105         var promises = [];
106         for (var video of videos)
107             promises.push(video.play());
108         Promise.all(promises).then(() => { resolve(videos); });
109     });
110 }
111     
112 function playAll() {
113     playVideos(document.querySelectorAll('video'));
114 }
115
116 function runTest() {
117     addVideos(initialVideoCount).then(playVideos);
118     trySeekingFaster(1.6);
119 }
120
121 function finishTest() {
122     pauseAll();
123 }
124
125 var initialVideoCount = 10;
126 var droppedFrameLimit = 1;
127 var initialPlaybackRate = 1;
128
129 function trySeekingFaster(value) {
130     initialPlaybackRate += value;
131     document.getElementById('video-speed').innerText = initialPlaybackRate;
132     for (var video of document.querySelectorAll('video'))
133         video.playbackRate = initialPlaybackRate;
134
135
136     setTimeout(() => {
137         var initialDroppedFrames = totalDroppedFrames();
138
139         setTimeout(() => {
140             var endingDroppedFrames = totalDroppedFrames();
141             document.getElementById('dropped-frame').innerText = endingDroppedFrames - initialDroppedFrames;
142
143             if (endingDroppedFrames - initialDroppedFrames <= droppedFrameLimit) {
144                 if (value <= 0.05) {
145                     finishTest();
146                     return;
147                 }
148
149                 trySeekingFaster(value);
150             }
151             else
152                 trySeekingSlower(value/2);
153         }, 1000);
154     }, 1000);
155 }
156
157 function trySeekingSlower(value) {
158     initialPlaybackRate -= value;
159     document.getElementById('video-speed').innerText = initialPlaybackRate;
160     for (var video of document.querySelectorAll('video'))
161         video.playbackRate = initialPlaybackRate;
162
163     setTimeout(() => {
164         var initialDroppedFrames = totalDroppedFrames();
165         setTimeout(() => {
166             var endingDroppedFrames = totalDroppedFrames();
167             document.getElementById('dropped-frame').innerText = endingDroppedFrames - initialDroppedFrames;
168
169             if (endingDroppedFrames - initialDroppedFrames <= droppedFrameLimit) {
170                 if (value <= 0.05) {
171                     finishTest();
172                     return;
173                 }
174
175                 trySeekingFaster(value/2);
176             } else
177                 trySeekingSlower(value);
178         }, 2000);
179     }, 2000);
180 }
181
182 </script>
183 </head>
184 <body>
185     <div>
186         Video Count: <span id="video-count">0</span> Speed: <span id="video-speed">0</span> Dropped Frame Delta: <span id="dropped-frame">0</span>
187     </div>
188     <div>
189         <button onclick="addVideos(1).then(playVideos)">add video</button><button onclick="removeVideos(1)">remove video</button><button onclick="pauseAll()">pause</button><button onclick="playAll()">play</button><br>
190     </div>
191 </body>
192 </html>