Merge pull request #75 from videojs/feature/switching
Adaptive-switching simulator
Showing
15 changed files
with
1168 additions
and
2 deletions
... | @@ -66,7 +66,8 @@ module.exports = function(grunt) { | ... | @@ -66,7 +66,8 @@ module.exports = function(grunt) { |
66 | '!test/tsSegment.js', | 66 | '!test/tsSegment.js', |
67 | '!test/fixtures/*.js', | 67 | '!test/fixtures/*.js', |
68 | '!test/manifest/**', | 68 | '!test/manifest/**', |
69 | '!test/muxer/**'] | 69 | '!test/muxer/**', |
70 | '!test/switcher/**'] | ||
70 | } | 71 | } |
71 | }, | 72 | }, |
72 | connect: { | 73 | connect: { | ... | ... |
... | @@ -147,10 +147,17 @@ | ... | @@ -147,10 +147,17 @@ |
147 | return; | 147 | return; |
148 | } | 148 | } |
149 | 149 | ||
150 | |||
151 | |||
150 | loader.state = 'SWITCHING_MEDIA'; | 152 | loader.state = 'SWITCHING_MEDIA'; |
151 | 153 | ||
152 | // abort any outstanding playlist refreshes | 154 | // there is already an outstanding playlist request |
153 | if (request) { | 155 | if (request) { |
156 | if (resolveUrl(loader.master.uri, playlist.uri) === request.url) { | ||
157 | // requesting to switch to the same playlist multiple times | ||
158 | // has no effect after the first | ||
159 | return; | ||
160 | } | ||
154 | request.abort(); | 161 | request.abort(); |
155 | request = null; | 162 | request = null; |
156 | } | 163 | } | ... | ... |
... | @@ -563,6 +563,7 @@ xhr = videojs.Hls.xhr = function(url, callback) { | ... | @@ -563,6 +563,7 @@ xhr = videojs.Hls.xhr = function(url, callback) { |
563 | 563 | ||
564 | request = new window.XMLHttpRequest(); | 564 | request = new window.XMLHttpRequest(); |
565 | request.open(options.method, url); | 565 | request.open(options.method, url); |
566 | request.url = url; | ||
566 | 567 | ||
567 | if (options.responseType) { | 568 | if (options.responseType) { |
568 | request.responseType = options.responseType; | 569 | request.responseType = options.responseType; | ... | ... |
... | @@ -349,6 +349,27 @@ | ... | @@ -349,6 +349,27 @@ |
349 | strictEqual(requests.length, 0, 'no requests is sent'); | 349 | strictEqual(requests.length, 0, 'no requests is sent'); |
350 | }); | 350 | }); |
351 | 351 | ||
352 | test('does not abort requests when the same playlist is re-requested', function() { | ||
353 | var loader = new videojs.Hls.PlaylistLoader('master.m3u8'); | ||
354 | requests.pop().respond(200, null, | ||
355 | '#EXTM3U\n' + | ||
356 | '#EXT-X-STREAM-INF:BANDWIDTH=1\n' + | ||
357 | 'low.m3u8\n' + | ||
358 | '#EXT-X-STREAM-INF:BANDWIDTH=2\n' + | ||
359 | 'high.m3u8\n'); | ||
360 | requests.pop().respond(200, null, | ||
361 | '#EXTM3U\n' + | ||
362 | '#EXT-X-MEDIA-SEQUENCE:0\n' + | ||
363 | '#EXTINF:10,\n' + | ||
364 | 'low-0.ts\n' + | ||
365 | '#EXT-X-ENDLIST\n'); | ||
366 | loader.media('high.m3u8'); | ||
367 | loader.media('high.m3u8'); | ||
368 | |||
369 | strictEqual(requests.length, 1, 'made only one request'); | ||
370 | ok(!requests[0].aborted, 'request not aborted'); | ||
371 | }); | ||
372 | |||
352 | test('throws an error if a media switch is initiated too early', function() { | 373 | test('throws an error if a media switch is initiated too early', function() { |
353 | var loader = new videojs.Hls.PlaylistLoader('master.m3u8'); | 374 | var loader = new videojs.Hls.PlaylistLoader('master.m3u8'); |
354 | 375 | ... | ... |
test/switcher/css/main.css
0 → 100644
1 | /* ========================================================================== | ||
2 | HTML5 Boilerplate styles - h5bp.com (generated via initializr.com) | ||
3 | ========================================================================== */ | ||
4 | |||
5 | html, | ||
6 | button, | ||
7 | input, | ||
8 | select, | ||
9 | textarea { | ||
10 | color: #222; | ||
11 | } | ||
12 | |||
13 | body { | ||
14 | font-size: 1em; | ||
15 | line-height: 1.4; | ||
16 | } | ||
17 | |||
18 | ::-moz-selection { | ||
19 | background: #b3d4fc; | ||
20 | text-shadow: none; | ||
21 | } | ||
22 | |||
23 | ::selection { | ||
24 | background: #b3d4fc; | ||
25 | text-shadow: none; | ||
26 | } | ||
27 | |||
28 | hr { | ||
29 | display: block; | ||
30 | height: 1px; | ||
31 | border: 0; | ||
32 | border-top: 1px solid #ccc; | ||
33 | margin: 1em 0; | ||
34 | padding: 0; | ||
35 | } | ||
36 | |||
37 | img { | ||
38 | vertical-align: middle; | ||
39 | } | ||
40 | |||
41 | fieldset { | ||
42 | border: 0; | ||
43 | margin: 0; | ||
44 | padding: 0; | ||
45 | } | ||
46 | |||
47 | textarea { | ||
48 | resize: vertical; | ||
49 | } | ||
50 | |||
51 | .chromeframe { | ||
52 | margin: 0.2em 0; | ||
53 | background: #ccc; | ||
54 | color: #000; | ||
55 | padding: 0.2em 0; | ||
56 | } | ||
57 | |||
58 | |||
59 | /* ===== Initializr Styles ================================================== | ||
60 | Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template | ||
61 | ========================================================================== */ | ||
62 | |||
63 | body { | ||
64 | font: 16px/26px Helvetica, Helvetica Neue, Arial; | ||
65 | } | ||
66 | |||
67 | .wrapper { | ||
68 | width: 90%; | ||
69 | margin: 0 5%; | ||
70 | } | ||
71 | |||
72 | /* =================== | ||
73 | ALL: Orange Theme | ||
74 | =================== */ | ||
75 | |||
76 | .header-container { | ||
77 | border-bottom: 20px solid #e44d26; | ||
78 | } | ||
79 | |||
80 | .footer-container, | ||
81 | .main aside { | ||
82 | border-top: 20px solid #e44d26; | ||
83 | } | ||
84 | |||
85 | .header-container, | ||
86 | .footer-container, | ||
87 | .main aside { | ||
88 | background: #f16529; | ||
89 | } | ||
90 | |||
91 | .title { | ||
92 | color: white; | ||
93 | } | ||
94 | |||
95 | /* ============== | ||
96 | MOBILE: Menu | ||
97 | ============== */ | ||
98 | |||
99 | nav ul { | ||
100 | margin: 0; | ||
101 | padding: 0; | ||
102 | } | ||
103 | |||
104 | nav a { | ||
105 | display: block; | ||
106 | margin-bottom: 10px; | ||
107 | padding: 15px 0; | ||
108 | |||
109 | text-align: center; | ||
110 | text-decoration: none; | ||
111 | font-weight: bold; | ||
112 | |||
113 | color: white; | ||
114 | background: #e44d26; | ||
115 | } | ||
116 | |||
117 | nav a:hover, | ||
118 | nav a:visited { | ||
119 | color: white; | ||
120 | } | ||
121 | |||
122 | nav a:hover { | ||
123 | text-decoration: underline; | ||
124 | } | ||
125 | |||
126 | /* ============== | ||
127 | MOBILE: Main | ||
128 | ============== */ | ||
129 | |||
130 | .main { | ||
131 | padding: 30px 0; | ||
132 | } | ||
133 | |||
134 | .main article h1 { | ||
135 | font-size: 2em; | ||
136 | } | ||
137 | |||
138 | .main aside { | ||
139 | color: white; | ||
140 | padding: 0px 5% 10px; | ||
141 | } | ||
142 | |||
143 | .footer-container footer { | ||
144 | color: white; | ||
145 | padding: 20px 0; | ||
146 | } | ||
147 | |||
148 | /* =============== | ||
149 | ALL: IE Fixes | ||
150 | =============== */ | ||
151 | |||
152 | .ie7 .title { | ||
153 | padding-top: 20px; | ||
154 | } | ||
155 | |||
156 | /* ========================================================================== | ||
157 | Author's custom styles | ||
158 | ========================================================================== */ | ||
159 | |||
160 | section { | ||
161 | clear: both; | ||
162 | } | ||
163 | |||
164 | form label { | ||
165 | display: block; | ||
166 | } | ||
167 | |||
168 | .result-wrapper { | ||
169 | float: left; | ||
170 | margin: 10px 0; | ||
171 | min-width: 422px; | ||
172 | width: 50%; | ||
173 | } | ||
174 | |||
175 | .result { | ||
176 | border: thin solid #aaa; | ||
177 | border-radius: 5px; | ||
178 | font-size: 10px; | ||
179 | line-height: 15px; | ||
180 | margin: 0 5px; | ||
181 | padding: 0 10px; | ||
182 | } | ||
183 | |||
184 | /* ========================================================================== | ||
185 | Media Queries | ||
186 | ========================================================================== */ | ||
187 | |||
188 | @media only screen and (min-width: 480px) { | ||
189 | |||
190 | /* ==================== | ||
191 | INTERMEDIATE: Menu | ||
192 | ==================== */ | ||
193 | |||
194 | nav a { | ||
195 | float: left; | ||
196 | width: 27%; | ||
197 | margin: 0 1.7%; | ||
198 | padding: 25px 2%; | ||
199 | margin-bottom: 0; | ||
200 | } | ||
201 | |||
202 | nav li:first-child a { | ||
203 | margin-left: 0; | ||
204 | } | ||
205 | |||
206 | nav li:last-child a { | ||
207 | margin-right: 0; | ||
208 | } | ||
209 | |||
210 | /* ======================== | ||
211 | INTERMEDIATE: IE Fixes | ||
212 | ======================== */ | ||
213 | |||
214 | nav ul li { | ||
215 | display: inline; | ||
216 | } | ||
217 | |||
218 | .oldie nav a { | ||
219 | margin: 0 0.7%; | ||
220 | } | ||
221 | } | ||
222 | |||
223 | @media only screen and (min-width: 768px) { | ||
224 | |||
225 | /* ==================== | ||
226 | WIDE: CSS3 Effects | ||
227 | ==================== */ | ||
228 | |||
229 | .header-container, | ||
230 | .main aside { | ||
231 | -webkit-box-shadow: 0 5px 10px #aaa; | ||
232 | -moz-box-shadow: 0 5px 10px #aaa; | ||
233 | box-shadow: 0 5px 10px #aaa; | ||
234 | } | ||
235 | |||
236 | /* ============ | ||
237 | WIDE: Menu | ||
238 | ============ */ | ||
239 | |||
240 | .title { | ||
241 | float: left; | ||
242 | } | ||
243 | |||
244 | nav { | ||
245 | float: right; | ||
246 | width: 38%; | ||
247 | } | ||
248 | |||
249 | /* ============ | ||
250 | WIDE: Main | ||
251 | ============ */ | ||
252 | |||
253 | .main article { | ||
254 | float: left; | ||
255 | width: 100%; | ||
256 | } | ||
257 | } | ||
258 | |||
259 | @media only screen and (min-width: 1140px) { | ||
260 | |||
261 | /* =============== | ||
262 | Maximal Width | ||
263 | =============== */ | ||
264 | |||
265 | .wrapper { | ||
266 | width: 1026px; /* 1140px - 10% for margins */ | ||
267 | margin: 0 auto; | ||
268 | } | ||
269 | } | ||
270 | |||
271 | /* ========================================================================== | ||
272 | Helper classes | ||
273 | ========================================================================== */ | ||
274 | |||
275 | .ir { | ||
276 | background-color: transparent; | ||
277 | border: 0; | ||
278 | overflow: hidden; | ||
279 | *text-indent: -9999px; | ||
280 | } | ||
281 | |||
282 | .ir:before { | ||
283 | content: ""; | ||
284 | display: block; | ||
285 | width: 0; | ||
286 | height: 150%; | ||
287 | } | ||
288 | |||
289 | .hidden { | ||
290 | display: none !important; | ||
291 | visibility: hidden; | ||
292 | } | ||
293 | |||
294 | .visuallyhidden { | ||
295 | border: 0; | ||
296 | clip: rect(0 0 0 0); | ||
297 | height: 1px; | ||
298 | margin: -1px; | ||
299 | overflow: hidden; | ||
300 | padding: 0; | ||
301 | position: absolute; | ||
302 | width: 1px; | ||
303 | } | ||
304 | |||
305 | .visuallyhidden.focusable:active, | ||
306 | .visuallyhidden.focusable:focus { | ||
307 | clip: auto; | ||
308 | height: auto; | ||
309 | margin: 0; | ||
310 | overflow: visible; | ||
311 | position: static; | ||
312 | width: auto; | ||
313 | } | ||
314 | |||
315 | .invisible { | ||
316 | visibility: hidden; | ||
317 | } | ||
318 | |||
319 | .clearfix:before, | ||
320 | .clearfix:after { | ||
321 | content: " "; | ||
322 | display: table; | ||
323 | } | ||
324 | |||
325 | .clearfix:after { | ||
326 | clear: both; | ||
327 | } | ||
328 | |||
329 | .clearfix { | ||
330 | *zoom: 1; | ||
331 | } | ||
332 | |||
333 | /* ========================================================================== | ||
334 | Print styles | ||
335 | ========================================================================== */ | ||
336 | |||
337 | @media print { | ||
338 | * { | ||
339 | background: transparent !important; | ||
340 | color: #000 !important; /* Black prints faster: h5bp.com/s */ | ||
341 | box-shadow: none !important; | ||
342 | text-shadow: none !important; | ||
343 | } | ||
344 | |||
345 | a, | ||
346 | a:visited { | ||
347 | text-decoration: underline; | ||
348 | } | ||
349 | |||
350 | a[href]:after { | ||
351 | content: " (" attr(href) ")"; | ||
352 | } | ||
353 | |||
354 | abbr[title]:after { | ||
355 | content: " (" attr(title) ")"; | ||
356 | } | ||
357 | |||
358 | /* | ||
359 | * Don't show links for images, or javascript/internal links | ||
360 | */ | ||
361 | |||
362 | .ir a:after, | ||
363 | a[href^="javascript:"]:after, | ||
364 | a[href^="#"]:after { | ||
365 | content: ""; | ||
366 | } | ||
367 | |||
368 | pre, | ||
369 | blockquote { | ||
370 | border: 1px solid #999; | ||
371 | page-break-inside: avoid; | ||
372 | } | ||
373 | |||
374 | thead { | ||
375 | display: table-header-group; /* h5bp.com/t */ | ||
376 | } | ||
377 | |||
378 | tr, | ||
379 | img { | ||
380 | page-break-inside: avoid; | ||
381 | } | ||
382 | |||
383 | img { | ||
384 | max-width: 100% !important; | ||
385 | } | ||
386 | |||
387 | @page { | ||
388 | margin: 0.5cm; | ||
389 | } | ||
390 | |||
391 | p, | ||
392 | h2, | ||
393 | h3 { | ||
394 | orphans: 3; | ||
395 | widows: 3; | ||
396 | } | ||
397 | |||
398 | h2, | ||
399 | h3 { | ||
400 | page-break-after: avoid; | ||
401 | } | ||
402 | } | ||
403 | |||
404 | /* ========================================================================== | ||
405 | Simulation Chart | ||
406 | ========================================================================== */ | ||
407 | |||
408 | .axis path, | ||
409 | .axis line { | ||
410 | fill: none; | ||
411 | stroke: #000; | ||
412 | shape-rendering: crispEdges; | ||
413 | } | ||
414 | |||
415 | .x.axis path { | ||
416 | display: none; | ||
417 | } | ||
418 | |||
419 | .line { | ||
420 | fill: none; | ||
421 | stroke-width: 1.5px; | ||
422 | } | ||
423 | .line.bandwidth { | ||
424 | stroke: steelblue; | ||
425 | } | ||
426 | .line.buffered { | ||
427 | stroke: #2ca02c; | ||
428 | opacity: 0.25; | ||
429 | } | ||
430 | .line.bitrate { | ||
431 | stroke: #999; | ||
432 | opacity: 0.5; | ||
433 | stroke-dasharray: 5, 5; | ||
434 | } | ||
435 | |||
436 | .timeline { | ||
437 | color: #888; | ||
438 | height: 500px; | ||
439 | margin: 0 auto; | ||
440 | text-align: center; | ||
441 | width: 960px; | ||
442 | } | ||
443 | |||
444 | /* ========================================================================== | ||
445 | Simulation Parameters | ||
446 | ========================================================================== */ | ||
447 | |||
448 | .network-timeline label { | ||
449 | display: inline; | ||
450 | } | ||
451 | .network-timeline .time { | ||
452 | width: 50px; | ||
453 | } | ||
454 | .network-timeline .bandwidth { | ||
455 | width: 140px; | ||
456 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
test/switcher/css/normalize.css
0 → 100644
1 | /*! normalize.css v1.1.2 | MIT License | git.io/normalize */ | ||
2 | |||
3 | /* ========================================================================== | ||
4 | HTML5 display definitions | ||
5 | ========================================================================== */ | ||
6 | |||
7 | /** | ||
8 | * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. | ||
9 | */ | ||
10 | |||
11 | article, | ||
12 | aside, | ||
13 | details, | ||
14 | figcaption, | ||
15 | figure, | ||
16 | footer, | ||
17 | header, | ||
18 | hgroup, | ||
19 | main, | ||
20 | nav, | ||
21 | section, | ||
22 | summary { | ||
23 | display: block; | ||
24 | } | ||
25 | |||
26 | /** | ||
27 | * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. | ||
28 | */ | ||
29 | |||
30 | audio, | ||
31 | canvas, | ||
32 | video { | ||
33 | display: inline-block; | ||
34 | *display: inline; | ||
35 | *zoom: 1; | ||
36 | } | ||
37 | |||
38 | /** | ||
39 | * Prevent modern browsers from displaying `audio` without controls. | ||
40 | * Remove excess height in iOS 5 devices. | ||
41 | */ | ||
42 | |||
43 | audio:not([controls]) { | ||
44 | display: none; | ||
45 | height: 0; | ||
46 | } | ||
47 | |||
48 | /** | ||
49 | * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. | ||
50 | * Known issue: no IE 6 support. | ||
51 | */ | ||
52 | |||
53 | [hidden] { | ||
54 | display: none; | ||
55 | } | ||
56 | |||
57 | /* ========================================================================== | ||
58 | Base | ||
59 | ========================================================================== */ | ||
60 | |||
61 | /** | ||
62 | * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using | ||
63 | * `em` units. | ||
64 | * 2. Prevent iOS text size adjust after orientation change, without disabling | ||
65 | * user zoom. | ||
66 | */ | ||
67 | |||
68 | html { | ||
69 | font-size: 100%; /* 1 */ | ||
70 | -ms-text-size-adjust: 100%; /* 2 */ | ||
71 | -webkit-text-size-adjust: 100%; /* 2 */ | ||
72 | } | ||
73 | |||
74 | /** | ||
75 | * Address `font-family` inconsistency between `textarea` and other form | ||
76 | * elements. | ||
77 | */ | ||
78 | |||
79 | html, | ||
80 | button, | ||
81 | input, | ||
82 | select, | ||
83 | textarea { | ||
84 | font-family: sans-serif; | ||
85 | } | ||
86 | |||
87 | /** | ||
88 | * Address margins handled incorrectly in IE 6/7. | ||
89 | */ | ||
90 | |||
91 | body { | ||
92 | margin: 0; | ||
93 | } | ||
94 | |||
95 | /* ========================================================================== | ||
96 | Links | ||
97 | ========================================================================== */ | ||
98 | |||
99 | /** | ||
100 | * Address `outline` inconsistency between Chrome and other browsers. | ||
101 | */ | ||
102 | |||
103 | a:focus { | ||
104 | outline: thin dotted; | ||
105 | } | ||
106 | |||
107 | /** | ||
108 | * Improve readability when focused and also mouse hovered in all browsers. | ||
109 | */ | ||
110 | |||
111 | a:active, | ||
112 | a:hover { | ||
113 | outline: 0; | ||
114 | } | ||
115 | |||
116 | /* ========================================================================== | ||
117 | Typography | ||
118 | ========================================================================== */ | ||
119 | |||
120 | /** | ||
121 | * Address font sizes and margins set differently in IE 6/7. | ||
122 | * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, | ||
123 | * and Chrome. | ||
124 | */ | ||
125 | |||
126 | h1 { | ||
127 | font-size: 2em; | ||
128 | margin: 0.67em 0; | ||
129 | } | ||
130 | |||
131 | h2 { | ||
132 | font-size: 1.5em; | ||
133 | margin: 0.83em 0; | ||
134 | } | ||
135 | |||
136 | h3 { | ||
137 | font-size: 1.17em; | ||
138 | margin: 1em 0; | ||
139 | } | ||
140 | |||
141 | h4 { | ||
142 | font-size: 1em; | ||
143 | margin: 1.33em 0; | ||
144 | } | ||
145 | |||
146 | h5 { | ||
147 | font-size: 0.83em; | ||
148 | margin: 1.67em 0; | ||
149 | } | ||
150 | |||
151 | h6 { | ||
152 | font-size: 0.67em; | ||
153 | margin: 2.33em 0; | ||
154 | } | ||
155 | |||
156 | /** | ||
157 | * Address styling not present in IE 7/8/9, Safari 5, and Chrome. | ||
158 | */ | ||
159 | |||
160 | abbr[title] { | ||
161 | border-bottom: 1px dotted; | ||
162 | } | ||
163 | |||
164 | /** | ||
165 | * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. | ||
166 | */ | ||
167 | |||
168 | b, | ||
169 | strong { | ||
170 | font-weight: bold; | ||
171 | } | ||
172 | |||
173 | blockquote { | ||
174 | margin: 1em 40px; | ||
175 | } | ||
176 | |||
177 | /** | ||
178 | * Address styling not present in Safari 5 and Chrome. | ||
179 | */ | ||
180 | |||
181 | dfn { | ||
182 | font-style: italic; | ||
183 | } | ||
184 | |||
185 | /** | ||
186 | * Address differences between Firefox and other browsers. | ||
187 | * Known issue: no IE 6/7 normalization. | ||
188 | */ | ||
189 | |||
190 | hr { | ||
191 | -moz-box-sizing: content-box; | ||
192 | box-sizing: content-box; | ||
193 | height: 0; | ||
194 | } | ||
195 | |||
196 | /** | ||
197 | * Address styling not present in IE 6/7/8/9. | ||
198 | */ | ||
199 | |||
200 | mark { | ||
201 | background: #ff0; | ||
202 | color: #000; | ||
203 | } | ||
204 | |||
205 | /** | ||
206 | * Address margins set differently in IE 6/7. | ||
207 | */ | ||
208 | |||
209 | p, | ||
210 | pre { | ||
211 | margin: 1em 0; | ||
212 | } | ||
213 | |||
214 | /** | ||
215 | * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. | ||
216 | */ | ||
217 | |||
218 | code, | ||
219 | kbd, | ||
220 | pre, | ||
221 | samp { | ||
222 | font-family: monospace, serif; | ||
223 | _font-family: 'courier new', monospace; | ||
224 | font-size: 1em; | ||
225 | } | ||
226 | |||
227 | /** | ||
228 | * Improve readability of pre-formatted text in all browsers. | ||
229 | */ | ||
230 | |||
231 | pre { | ||
232 | white-space: pre; | ||
233 | white-space: pre-wrap; | ||
234 | word-wrap: break-word; | ||
235 | } | ||
236 | |||
237 | /** | ||
238 | * Address CSS quotes not supported in IE 6/7. | ||
239 | */ | ||
240 | |||
241 | q { | ||
242 | quotes: none; | ||
243 | } | ||
244 | |||
245 | /** | ||
246 | * Address `quotes` property not supported in Safari 4. | ||
247 | */ | ||
248 | |||
249 | q:before, | ||
250 | q:after { | ||
251 | content: ''; | ||
252 | content: none; | ||
253 | } | ||
254 | |||
255 | /** | ||
256 | * Address inconsistent and variable font size in all browsers. | ||
257 | */ | ||
258 | |||
259 | small { | ||
260 | font-size: 80%; | ||
261 | } | ||
262 | |||
263 | /** | ||
264 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. | ||
265 | */ | ||
266 | |||
267 | sub, | ||
268 | sup { | ||
269 | font-size: 75%; | ||
270 | line-height: 0; | ||
271 | position: relative; | ||
272 | vertical-align: baseline; | ||
273 | } | ||
274 | |||
275 | sup { | ||
276 | top: -0.5em; | ||
277 | } | ||
278 | |||
279 | sub { | ||
280 | bottom: -0.25em; | ||
281 | } | ||
282 | |||
283 | /* ========================================================================== | ||
284 | Lists | ||
285 | ========================================================================== */ | ||
286 | |||
287 | /** | ||
288 | * Address margins set differently in IE 6/7. | ||
289 | */ | ||
290 | |||
291 | dl, | ||
292 | menu, | ||
293 | ol, | ||
294 | ul { | ||
295 | margin: 1em 0; | ||
296 | } | ||
297 | |||
298 | dd { | ||
299 | margin: 0 0 0 40px; | ||
300 | } | ||
301 | |||
302 | /** | ||
303 | * Address paddings set differently in IE 6/7. | ||
304 | */ | ||
305 | |||
306 | menu, | ||
307 | ol, | ||
308 | ul { | ||
309 | padding: 0 0 0 40px; | ||
310 | } | ||
311 | |||
312 | /** | ||
313 | * Correct list images handled incorrectly in IE 7. | ||
314 | */ | ||
315 | |||
316 | nav ul, | ||
317 | nav ol { | ||
318 | list-style: none; | ||
319 | list-style-image: none; | ||
320 | } | ||
321 | |||
322 | /* ========================================================================== | ||
323 | Embedded content | ||
324 | ========================================================================== */ | ||
325 | |||
326 | /** | ||
327 | * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. | ||
328 | * 2. Improve image quality when scaled in IE 7. | ||
329 | */ | ||
330 | |||
331 | img { | ||
332 | border: 0; /* 1 */ | ||
333 | -ms-interpolation-mode: bicubic; /* 2 */ | ||
334 | } | ||
335 | |||
336 | /** | ||
337 | * Correct overflow displayed oddly in IE 9. | ||
338 | */ | ||
339 | |||
340 | svg:not(:root) { | ||
341 | overflow: hidden; | ||
342 | } | ||
343 | |||
344 | /* ========================================================================== | ||
345 | Figures | ||
346 | ========================================================================== */ | ||
347 | |||
348 | /** | ||
349 | * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. | ||
350 | */ | ||
351 | |||
352 | figure { | ||
353 | margin: 0; | ||
354 | } | ||
355 | |||
356 | /* ========================================================================== | ||
357 | Forms | ||
358 | ========================================================================== */ | ||
359 | |||
360 | /** | ||
361 | * Correct margin displayed oddly in IE 6/7. | ||
362 | */ | ||
363 | |||
364 | form { | ||
365 | margin: 0; | ||
366 | } | ||
367 | |||
368 | /** | ||
369 | * Define consistent border, margin, and padding. | ||
370 | */ | ||
371 | |||
372 | fieldset { | ||
373 | border: 1px solid #c0c0c0; | ||
374 | margin: 0 2px; | ||
375 | padding: 0.35em 0.625em 0.75em; | ||
376 | } | ||
377 | |||
378 | /** | ||
379 | * 1. Correct color not being inherited in IE 6/7/8/9. | ||
380 | * 2. Correct text not wrapping in Firefox 3. | ||
381 | * 3. Correct alignment displayed oddly in IE 6/7. | ||
382 | */ | ||
383 | |||
384 | legend { | ||
385 | border: 0; /* 1 */ | ||
386 | padding: 0; | ||
387 | white-space: normal; /* 2 */ | ||
388 | *margin-left: -7px; /* 3 */ | ||
389 | } | ||
390 | |||
391 | /** | ||
392 | * 1. Correct font size not being inherited in all browsers. | ||
393 | * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, | ||
394 | * and Chrome. | ||
395 | * 3. Improve appearance and consistency in all browsers. | ||
396 | */ | ||
397 | |||
398 | button, | ||
399 | input, | ||
400 | select, | ||
401 | textarea { | ||
402 | font-size: 100%; /* 1 */ | ||
403 | margin: 0; /* 2 */ | ||
404 | vertical-align: baseline; /* 3 */ | ||
405 | *vertical-align: middle; /* 3 */ | ||
406 | } | ||
407 | |||
408 | /** | ||
409 | * Address Firefox 3+ setting `line-height` on `input` using `!important` in | ||
410 | * the UA stylesheet. | ||
411 | */ | ||
412 | |||
413 | button, | ||
414 | input { | ||
415 | line-height: normal; | ||
416 | } | ||
417 | |||
418 | /** | ||
419 | * Address inconsistent `text-transform` inheritance for `button` and `select`. | ||
420 | * All other form control elements do not inherit `text-transform` values. | ||
421 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. | ||
422 | * Correct `select` style inheritance in Firefox 4+ and Opera. | ||
423 | */ | ||
424 | |||
425 | button, | ||
426 | select { | ||
427 | text-transform: none; | ||
428 | } | ||
429 | |||
430 | /** | ||
431 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` | ||
432 | * and `video` controls. | ||
433 | * 2. Correct inability to style clickable `input` types in iOS. | ||
434 | * 3. Improve usability and consistency of cursor style between image-type | ||
435 | * `input` and others. | ||
436 | * 4. Remove inner spacing in IE 7 without affecting normal text inputs. | ||
437 | * Known issue: inner spacing remains in IE 6. | ||
438 | */ | ||
439 | |||
440 | button, | ||
441 | html input[type="button"], /* 1 */ | ||
442 | input[type="reset"], | ||
443 | input[type="submit"] { | ||
444 | -webkit-appearance: button; /* 2 */ | ||
445 | cursor: pointer; /* 3 */ | ||
446 | *overflow: visible; /* 4 */ | ||
447 | } | ||
448 | |||
449 | /** | ||
450 | * Re-set default cursor for disabled elements. | ||
451 | */ | ||
452 | |||
453 | button[disabled], | ||
454 | html input[disabled] { | ||
455 | cursor: default; | ||
456 | } | ||
457 | |||
458 | /** | ||
459 | * 1. Address box sizing set to content-box in IE 8/9. | ||
460 | * 2. Remove excess padding in IE 8/9. | ||
461 | * 3. Remove excess padding in IE 7. | ||
462 | * Known issue: excess padding remains in IE 6. | ||
463 | */ | ||
464 | |||
465 | input[type="checkbox"], | ||
466 | input[type="radio"] { | ||
467 | box-sizing: border-box; /* 1 */ | ||
468 | padding: 0; /* 2 */ | ||
469 | *height: 13px; /* 3 */ | ||
470 | *width: 13px; /* 3 */ | ||
471 | } | ||
472 | |||
473 | /** | ||
474 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. | ||
475 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome | ||
476 | * (include `-moz` to future-proof). | ||
477 | */ | ||
478 | |||
479 | input[type="search"] { | ||
480 | -webkit-appearance: textfield; /* 1 */ | ||
481 | -moz-box-sizing: content-box; | ||
482 | -webkit-box-sizing: content-box; /* 2 */ | ||
483 | box-sizing: content-box; | ||
484 | } | ||
485 | |||
486 | /** | ||
487 | * Remove inner padding and search cancel button in Safari 5 and Chrome | ||
488 | * on OS X. | ||
489 | */ | ||
490 | |||
491 | input[type="search"]::-webkit-search-cancel-button, | ||
492 | input[type="search"]::-webkit-search-decoration { | ||
493 | -webkit-appearance: none; | ||
494 | } | ||
495 | |||
496 | /** | ||
497 | * Remove inner padding and border in Firefox 3+. | ||
498 | */ | ||
499 | |||
500 | button::-moz-focus-inner, | ||
501 | input::-moz-focus-inner { | ||
502 | border: 0; | ||
503 | padding: 0; | ||
504 | } | ||
505 | |||
506 | /** | ||
507 | * 1. Remove default vertical scrollbar in IE 6/7/8/9. | ||
508 | * 2. Improve readability and alignment in all browsers. | ||
509 | */ | ||
510 | |||
511 | textarea { | ||
512 | overflow: auto; /* 1 */ | ||
513 | vertical-align: top; /* 2 */ | ||
514 | } | ||
515 | |||
516 | /* ========================================================================== | ||
517 | Tables | ||
518 | ========================================================================== */ | ||
519 | |||
520 | /** | ||
521 | * Remove most spacing between table cells. | ||
522 | */ | ||
523 | |||
524 | table { | ||
525 | border-collapse: collapse; | ||
526 | border-spacing: 0; | ||
527 | } |
test/switcher/css/normalize.min.css
0 → 100644
1 | /*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
test/switcher/index.html
0 → 100644
1 | <!DOCTYPE html> | ||
2 | <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | ||
3 | <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> | ||
4 | <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> | ||
5 | <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> | ||
6 | <head> | ||
7 | <meta charset="utf-8"> | ||
8 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
9 | <title>Playlist Switching Simulator</title> | ||
10 | <meta name="description" content=""> | ||
11 | <meta name="viewport" content="width=device-width"> | ||
12 | |||
13 | <link rel="stylesheet" href="css/normalize.min.css"> | ||
14 | <link rel="stylesheet" href="css/main.css"> | ||
15 | <link rel="stylesheet" href="../../node_modules/video.js/dist/video-js/video-js.css"> | ||
16 | |||
17 | <script src="js/vendor/modernizr-2.6.2.min.js"></script> | ||
18 | </head> | ||
19 | <body> | ||
20 | <!--[if lt IE 7]> | ||
21 | <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> | ||
22 | <![endif]--> | ||
23 | |||
24 | <div class="header-container"> | ||
25 | <header class="wrapper clearfix"> | ||
26 | <h1 class="title">Playlist Switching Simulator</h1> | ||
27 | </header> | ||
28 | </div> | ||
29 | |||
30 | <div class="main-container"> | ||
31 | <div class="main wrapper clearfix"> | ||
32 | |||
33 | <article> | ||
34 | <header> | ||
35 | <p> | ||
36 | You can use this page to visualize the behavior of the | ||
37 | playlist switcher under different network conditions. It | ||
38 | can helpful to understand how tweaks to the switching | ||
39 | logic will affect playback. | ||
40 | </p> | ||
41 | <p> | ||
42 | Flash security restrictions prevent this page from running | ||
43 | over the file protocol. Run <code>grunt connect</code> and | ||
44 | then <a href="http://localhost:9999/test/switcher">reload.</a> | ||
45 | </p> | ||
46 | </header> | ||
47 | <section> | ||
48 | <h2>Timeline</h2> | ||
49 | <p class=timeline>Simulation results will show up here</p> | ||
50 | <button id=run-simulation type=submit>Run Simulation</button> | ||
51 | </section> | ||
52 | <section> | ||
53 | <h2>Parameters</h2> | ||
54 | <form id=parameters> | ||
55 | <ol class=network-timeline> | ||
56 | <li> | ||
57 | <label> | ||
58 | After <input name=time0 class=time type=number value=0 min=0> seconds, | ||
59 | </label> | ||
60 | <label> | ||
61 | the link capacity is <input name=bandwidth0 class=bandwidth type=number value=921600> bits per second | ||
62 | </label> | ||
63 | </li> | ||
64 | <li> | ||
65 | <label> | ||
66 | After <input name=time1 class=time type=number value=150 min=0> seconds, | ||
67 | </label> | ||
68 | <label> | ||
69 | the link capacity is <input name=bandwidth1 class=bandwidth type=number value=450560> bits per second | ||
70 | </label> | ||
71 | </li> | ||
72 | <li> | ||
73 | <label> | ||
74 | After <input name=time2 class=time type=number value=600 min=0> seconds, | ||
75 | </label> | ||
76 | <label> | ||
77 | the link capacity is <input name=bandwidth2 class=bandwidth type=number value=1843200> bits per second | ||
78 | </label> | ||
79 | </li> | ||
80 | </ol> | ||
81 | <p> | ||
82 | You can simulate more complex network conditions by | ||
83 | changing the bandwidth during the run. Start a new time | ||
84 | period and then define its starting time and link | ||
85 | capacity. | ||
86 | <button type=button class=add-time-period>Add time period</button> | ||
87 | </p> | ||
88 | The video is available at | ||
89 | <ul> | ||
90 | <li><input class=bitrate type=number min=1 value=65536> bits per second</li> | ||
91 | <li><input class=bitrate type=number min=1 value=153600> bits per second</li> | ||
92 | <li><input class=bitrate type=number min=1 value=450560> bits per second</li> | ||
93 | <li><input class=bitrate type=number min=1 value=921600> bits per second</li> | ||
94 | <li><input class=bitrate type=number min=1 value=1536000> bits per second</li> | ||
95 | </ul> | ||
96 | </form> | ||
97 | </section> | ||
98 | </article> | ||
99 | |||
100 | </div> <!-- #main --> | ||
101 | </div> <!-- #main-container --> | ||
102 | |||
103 | <div class="footer-container"> | ||
104 | <footer class="wrapper"> | ||
105 | <h3>videojs-contrib-hls</h3> | ||
106 | </footer> | ||
107 | </div> | ||
108 | <div id=fixture></div> | ||
109 | <script src="../../node_modules/sinon/lib/sinon.js"></script> | ||
110 | <script src="../../node_modules/sinon/lib/sinon/util/event.js"></script> | ||
111 | <script src="../../node_modules/sinon/lib/sinon/util/fake_xml_http_request.js"></script> | ||
112 | <script src="../../node_modules/sinon/lib/sinon/util/xhr_ie.js"></script> | ||
113 | <script src="../../node_modules/sinon/lib/sinon/util/fake_timers.js"></script> | ||
114 | <script src="js/vendor/d3.min.js"></script> | ||
115 | |||
116 | <script src="../../node_modules/video.js/dist/video-js/video.js"></script> | ||
117 | <script src="../../node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js"></script> | ||
118 | <script src="../../src/videojs-hls.js"></script> | ||
119 | <script src="../../src/stream.js"></script> | ||
120 | <script src="../../src/m3u8/m3u8-parser.js"></script> | ||
121 | <script src="../../src/playlist-loader.js"></script> | ||
122 | |||
123 | <script src="js/switcher.js"></script> | ||
124 | </body> | ||
125 | </html> |
test/switcher/js/main.js
0 → 100644
test/switcher/js/switcher.js
0 → 100644
This diff is collapsed.
Click to expand it.
test/switcher/js/vendor/LICENSE
0 → 100644
1 | Copyright (c) 2010-2014, Michael Bostock | ||
2 | All rights reserved. | ||
3 | |||
4 | Redistribution and use in source and binary forms, with or without | ||
5 | modification, are permitted provided that the following conditions are met: | ||
6 | |||
7 | * Redistributions of source code must retain the above copyright notice, this | ||
8 | list of conditions and the following disclaimer. | ||
9 | |||
10 | * Redistributions in binary form must reproduce the above copyright notice, | ||
11 | this list of conditions and the following disclaimer in the documentation | ||
12 | and/or other materials provided with the distribution. | ||
13 | |||
14 | * The name Michael Bostock may not be used to endorse or promote products | ||
15 | derived from this software without specific prior written permission. | ||
16 | |||
17 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | ||
18 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | ||
19 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE | ||
20 | DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT, | ||
21 | INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, | ||
22 | BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, | ||
23 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY | ||
24 | OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING | ||
25 | NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, | ||
26 | EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
test/switcher/js/vendor/d3.js
0 → 100644
This diff could not be displayed because it is too large.
test/switcher/js/vendor/d3.min.js
0 → 100644
This diff could not be displayed because it is too large.
test/switcher/js/vendor/d3.zip
0 → 100644
No preview for this file type
This diff is collapsed.
Click to expand it.
-
Please register or sign in to post a comment