Merge branch 'master' into smallerrors
Conflicts: src/flv-tag.js
Showing
17 changed files
with
1435 additions
and
179 deletions
... | @@ -46,7 +46,7 @@ module.exports = function(grunt) { | ... | @@ -46,7 +46,7 @@ module.exports = function(grunt) { |
46 | } | 46 | } |
47 | }, | 47 | }, |
48 | qunit: { | 48 | qunit: { |
49 | files: ['test/**/*.html', '!test/perf.html'] | 49 | files: ['test/**/*.html', '!test/perf.html', '!test/muxer/**'] |
50 | }, | 50 | }, |
51 | jshint: { | 51 | jshint: { |
52 | gruntfile: { | 52 | gruntfile: { |
... | @@ -68,7 +68,8 @@ module.exports = function(grunt) { | ... | @@ -68,7 +68,8 @@ module.exports = function(grunt) { |
68 | src: ['test/**/*.js', | 68 | src: ['test/**/*.js', |
69 | '!test/tsSegment.js', | 69 | '!test/tsSegment.js', |
70 | '!test/fixtures/*.js', | 70 | '!test/fixtures/*.js', |
71 | '!test/manifest/**'] | 71 | '!test/manifest/**', |
72 | '!test/muxer/**'] | ||
72 | } | 73 | } |
73 | }, | 74 | }, |
74 | connect: { | 75 | connect: { | ... | ... |
1 | [![Build Status](https://travis-ci.org/brightcove/videojs-contrib-hls.png)](https://travis-ci.org/brightcove/videojs-contrib-hls) | 1 | [![Build Status](https://travis-ci.org/videojs/videojs-contrib-hls.png)](https://travis-ci.org/videojs/videojs-contrib-hls) |
2 | 2 | ||
3 | # video.js HLS Plugin | 3 | # video.js HLS Plugin |
4 | 4 | ... | ... |
... | @@ -20,7 +20,7 @@ var | ... | @@ -20,7 +20,7 @@ var |
20 | window.videojs.hls.AacStream = function() { | 20 | window.videojs.hls.AacStream = function() { |
21 | var | 21 | var |
22 | next_pts, // :uint | 22 | next_pts, // :uint |
23 | pts_delta = -1, // :int | 23 | pts_offset, // :int |
24 | state, // :uint | 24 | state, // :uint |
25 | pes_length, // :int | 25 | pes_length, // :int |
26 | 26 | ||
... | @@ -39,12 +39,13 @@ window.videojs.hls.AacStream = function() { | ... | @@ -39,12 +39,13 @@ window.videojs.hls.AacStream = function() { |
39 | 39 | ||
40 | // (pts:uint, pes_size:int, dataAligned:Boolean):void | 40 | // (pts:uint, pes_size:int, dataAligned:Boolean):void |
41 | this.setNextTimeStamp = function(pts, pes_size, dataAligned) { | 41 | this.setNextTimeStamp = function(pts, pes_size, dataAligned) { |
42 | if (0 > pts_delta) { | ||
43 | // We assume the very firts pts is less than 0x80000000 | ||
44 | pts_delta = pts; | ||
45 | } | ||
46 | 42 | ||
47 | next_pts = pts - pts_delta; | 43 | // on the first invocation, capture the starting PTS value |
44 | pts_offset = pts; | ||
45 | |||
46 | // on subsequent invocations, calculate the PTS based on the starting offset | ||
47 | this.setNextTimeStamp = function(pts, pes_size, dataAligned) { | ||
48 | next_pts = pts - pts_offset; | ||
48 | pes_length = pes_size; | 49 | pes_length = pes_size; |
49 | 50 | ||
50 | // If data is aligned, flush all internal buffers | 51 | // If data is aligned, flush all internal buffers |
... | @@ -53,101 +54,104 @@ window.videojs.hls.AacStream = function() { | ... | @@ -53,101 +54,104 @@ window.videojs.hls.AacStream = function() { |
53 | } | 54 | } |
54 | }; | 55 | }; |
55 | 56 | ||
57 | this.setNextTimeStamp(pts, pes_size, dataAligned); | ||
58 | }; | ||
59 | |||
56 | // (data:ByteArray, o:int = 0, l:int = 0):void | 60 | // (data:ByteArray, o:int = 0, l:int = 0):void |
57 | this.writeBytes = function(data, o, l) { | 61 | this.writeBytes = function(data, offset, length) { |
58 | var | 62 | var |
59 | e, // :int | 63 | end, // :int |
60 | newExtraData, // :uint | 64 | newExtraData, // :uint |
61 | bytesToCopy; // :int | 65 | bytesToCopy; // :int |
62 | 66 | ||
63 | // default arguments | 67 | // default arguments |
64 | o = o || 0; | 68 | offset = offset || 0; |
65 | l = l || 0; | 69 | length = length || 0; |
66 | 70 | ||
67 | // Do not allow more than 'pes_length' bytes to be written | 71 | // Do not allow more than 'pes_length' bytes to be written |
68 | l = (pes_length < l ? pes_length : l); | 72 | length = (pes_length < length ? pes_length : length); |
69 | pes_length -= l; | 73 | pes_length -= length; |
70 | e = o + l; | 74 | end = offset + length; |
71 | while (o < e) { | 75 | while (offset < end) { |
72 | switch (state) { | 76 | switch (state) { |
73 | default: | 77 | default: |
74 | state = 0; | 78 | state = 0; |
75 | break; | 79 | break; |
76 | case 0: | 80 | case 0: |
77 | if (o >= e) { | 81 | if (offset >= end) { |
78 | return; | 82 | return; |
79 | } | 83 | } |
80 | if (0xFF !== data[o]) { | 84 | if (0xFF !== data[offset]) { |
81 | console.assert(false, 'Error no ATDS header found'); | 85 | console.assert(false, 'Error no ATDS header found'); |
82 | o += 1; | 86 | offset += 1; |
83 | state = 0; | 87 | state = 0; |
84 | return; | 88 | return; |
85 | } | 89 | } |
86 | 90 | ||
87 | o += 1; | 91 | offset += 1; |
88 | state = 1; | 92 | state = 1; |
89 | break; | 93 | break; |
90 | case 1: | 94 | case 1: |
91 | if (o >= e) { | 95 | if (offset >= end) { |
92 | return; | 96 | return; |
93 | } | 97 | } |
94 | if (0xF0 !== (data[o] & 0xF0)) { | 98 | if (0xF0 !== (data[offset] & 0xF0)) { |
95 | console.assert(false, 'Error no ATDS header found'); | 99 | console.assert(false, 'Error no ATDS header found'); |
96 | o +=1; | 100 | offset +=1; |
97 | state = 0; | 101 | state = 0; |
98 | return; | 102 | return; |
99 | } | 103 | } |
100 | 104 | ||
101 | adtsProtectionAbsent = !!(data[o] & 0x01); | 105 | adtsProtectionAbsent = !!(data[offset] & 0x01); |
102 | 106 | ||
103 | o += 1; | 107 | offset += 1; |
104 | state = 2; | 108 | state = 2; |
105 | break; | 109 | break; |
106 | case 2: | 110 | case 2: |
107 | if (o >= e) { | 111 | if (offset >= end) { |
108 | return; | 112 | return; |
109 | } | 113 | } |
110 | adtsObjectType = ((data[o] & 0xC0) >>> 6) + 1; | 114 | adtsObjectType = ((data[offset] & 0xC0) >>> 6) + 1; |
111 | adtsSampleingIndex = ((data[o] & 0x3C) >>> 2); | 115 | adtsSampleingIndex = ((data[offset] & 0x3C) >>> 2); |
112 | adtsChanelConfig = ((data[o] & 0x01) << 2); | 116 | adtsChanelConfig = ((data[offset] & 0x01) << 2); |
113 | 117 | ||
114 | o += 1; | 118 | offset += 1; |
115 | state = 3; | 119 | state = 3; |
116 | break; | 120 | break; |
117 | case 3: | 121 | case 3: |
118 | if (o >= e) { | 122 | if (offset >= end) { |
119 | return; | 123 | return; |
120 | } | 124 | } |
121 | adtsChanelConfig |= ((data[o] & 0xC0) >>> 6); | 125 | adtsChanelConfig |= ((data[offset] & 0xC0) >>> 6); |
122 | adtsFrameSize = ((data[o] & 0x03) << 11); | 126 | adtsFrameSize = ((data[offset] & 0x03) << 11); |
123 | 127 | ||
124 | o += 1; | 128 | offset += 1; |
125 | state = 4; | 129 | state = 4; |
126 | break; | 130 | break; |
127 | case 4: | 131 | case 4: |
128 | if (o >= e) { | 132 | if (offset >= end) { |
129 | return; | 133 | return; |
130 | } | 134 | } |
131 | adtsFrameSize |= (data[o] << 3); | 135 | adtsFrameSize |= (data[offset] << 3); |
132 | 136 | ||
133 | o += 1; | 137 | offset += 1; |
134 | state = 5; | 138 | state = 5; |
135 | break; | 139 | break; |
136 | case 5: | 140 | case 5: |
137 | if(o >= e) { | 141 | if(offset >= end) { |
138 | return; | 142 | return; |
139 | } | 143 | } |
140 | adtsFrameSize |= ((data[o] & 0xE0) >>> 5); | 144 | adtsFrameSize |= ((data[offset] & 0xE0) >>> 5); |
141 | adtsFrameSize -= (adtsProtectionAbsent ? 7 : 9); | 145 | adtsFrameSize -= (adtsProtectionAbsent ? 7 : 9); |
142 | 146 | ||
143 | o += 1; | 147 | offset += 1; |
144 | state = 6; | 148 | state = 6; |
145 | break; | 149 | break; |
146 | case 6: | 150 | case 6: |
147 | if (o >= e) { | 151 | if (offset >= end) { |
148 | return; | 152 | return; |
149 | } | 153 | } |
150 | adtsSampleCount = ((data[o] & 0x03) + 1) * 1024; | 154 | adtsSampleCount = ((data[offset] & 0x03) + 1) * 1024; |
151 | adtsDuration = (adtsSampleCount * 1000) / adtsSampleingRates[adtsSampleingIndex]; | 155 | adtsDuration = (adtsSampleCount * 1000) / adtsSampleingRates[adtsSampleingIndex]; |
152 | 156 | ||
153 | newExtraData = (adtsObjectType << 11) | | 157 | newExtraData = (adtsObjectType << 11) | |
... | @@ -182,15 +186,15 @@ window.videojs.hls.AacStream = function() { | ... | @@ -182,15 +186,15 @@ window.videojs.hls.AacStream = function() { |
182 | } | 186 | } |
183 | 187 | ||
184 | // Skip the checksum if there is one | 188 | // Skip the checksum if there is one |
185 | o += 1; | 189 | offset += 1; |
186 | state = 7; | 190 | state = 7; |
187 | break; | 191 | break; |
188 | case 7: | 192 | case 7: |
189 | if (!adtsProtectionAbsent) { | 193 | if (!adtsProtectionAbsent) { |
190 | if (2 > (e - o)) { | 194 | if (2 > (end - offset)) { |
191 | return; | 195 | return; |
192 | } else { | 196 | } else { |
193 | o += 2; | 197 | offset += 2; |
194 | } | 198 | } |
195 | } | 199 | } |
196 | 200 | ||
... | @@ -201,12 +205,12 @@ window.videojs.hls.AacStream = function() { | ... | @@ -201,12 +205,12 @@ window.videojs.hls.AacStream = function() { |
201 | break; | 205 | break; |
202 | case 8: | 206 | case 8: |
203 | while (adtsFrameSize) { | 207 | while (adtsFrameSize) { |
204 | if (o >= e) { | 208 | if (offset >= end) { |
205 | return; | 209 | return; |
206 | } | 210 | } |
207 | bytesToCopy = (e - o) < adtsFrameSize ? (e - o) : adtsFrameSize; | 211 | bytesToCopy = (end - offset) < adtsFrameSize ? (end - offset) : adtsFrameSize; |
208 | aacFrame.writeBytes(data, o, bytesToCopy); | 212 | aacFrame.writeBytes(data, offset, bytesToCopy); |
209 | o += bytesToCopy; | 213 | offset += bytesToCopy; |
210 | adtsFrameSize -= bytesToCopy; | 214 | adtsFrameSize -= bytesToCopy; |
211 | } | 215 | } |
212 | 216 | ... | ... |
... | @@ -14,13 +14,15 @@ | ... | @@ -14,13 +14,15 @@ |
14 | } | 14 | } |
15 | return '.'; | 15 | return '.'; |
16 | }, | 16 | }, |
17 | result = '', | ||
17 | hex, | 18 | hex, |
18 | ascii; | 19 | ascii; |
19 | for (var j = 0; j < bytes.length / step; j++) { | 20 | for (var j = 0; j < bytes.length / step; j++) { |
20 | hex = bytes.slice(j * step, j * step + step).map(formatHexString).join(' '); | 21 | hex = bytes.slice(j * step, j * step + step).map(formatHexString).join(' '); |
21 | ascii = bytes.slice(j * step, j * step + step).map(formatAsciiString).join(''); | 22 | ascii = bytes.slice(j * step, j * step + step).map(formatAsciiString).join(''); |
22 | return hex + ' ' + ascii; | 23 | result += hex + ' ' + ascii + '\n'; |
23 | } | 24 | } |
25 | return result; | ||
24 | }, | 26 | }, |
25 | tagDump: function(tag) { | 27 | tagDump: function(tag) { |
26 | return module.hexDump(tag.bytes); | 28 | return module.hexDump(tag.bytes); | ... | ... |
... | @@ -32,7 +32,6 @@ window.videojs.hls.ExpGolomb = function(workingData) { | ... | @@ -32,7 +32,6 @@ window.videojs.hls.ExpGolomb = function(workingData) { |
32 | workingBytes = new Uint8Array(4), | 32 | workingBytes = new Uint8Array(4), |
33 | availableBytes = Math.min(4, workingBytesAvailable); | 33 | availableBytes = Math.min(4, workingBytesAvailable); |
34 | 34 | ||
35 | // console.assert(availableBytes > 0); | ||
36 | if (availableBytes === 0) { | 35 | if (availableBytes === 0) { |
37 | throw new Error('no bytes available'); | 36 | throw new Error('no bytes available'); |
38 | } | 37 | } | ... | ... |
1 | (function(window) { | 1 | (function(window) { |
2 | 2 | ||
3 | window.videojs = window.videojs || {}; | ||
4 | window.videojs.hls = window.videojs.hls || {}; | ||
5 | |||
3 | var hls = window.videojs.hls; | 6 | var hls = window.videojs.hls; |
4 | 7 | ||
5 | // (type:uint, extraData:Boolean = false) extends ByteArray | 8 | // (type:uint, extraData:Boolean = false) extends ByteArray | ... | ... |
... | @@ -8,7 +8,6 @@ | ... | @@ -8,7 +8,6 @@ |
8 | 8 | ||
9 | (function(window) { | 9 | (function(window) { |
10 | var | 10 | var |
11 | |||
12 | ExpGolomb = window.videojs.hls.ExpGolomb, | 11 | ExpGolomb = window.videojs.hls.ExpGolomb, |
13 | FlvTag = window.videojs.hls.FlvTag, | 12 | FlvTag = window.videojs.hls.FlvTag, |
14 | 13 | ||
... | @@ -16,22 +15,8 @@ | ... | @@ -16,22 +15,8 @@ |
16 | this.sps = []; // :Array | 15 | this.sps = []; // :Array |
17 | this.pps = []; // :Array | 16 | this.pps = []; // :Array |
18 | 17 | ||
19 | this.addSPS = function(size) { // :ByteArray | ||
20 | console.assert(size > 0); | ||
21 | var tmp = new Uint8Array(size); // :ByteArray | ||
22 | this.sps.push(tmp); | ||
23 | return tmp; | ||
24 | }; | ||
25 | |||
26 | this.addPPS = function(size) { // :ByteArray | ||
27 | console.assert(size); | ||
28 | var tmp = new Uint8Array(size); // :ByteArray | ||
29 | this.pps.push(tmp); | ||
30 | return tmp; | ||
31 | }; | ||
32 | |||
33 | this.extraDataExists = function() { // :Boolean | 18 | this.extraDataExists = function() { // :Boolean |
34 | return 0 < this.sps.length; | 19 | return this.sps.length > 0; |
35 | }; | 20 | }; |
36 | 21 | ||
37 | // (sizeOfScalingList:int, expGolomb:ExpGolomb):void | 22 | // (sizeOfScalingList:int, expGolomb:ExpGolomb):void |
... | @@ -56,61 +41,37 @@ | ... | @@ -56,61 +41,37 @@ |
56 | }; | 41 | }; |
57 | 42 | ||
58 | /** | 43 | /** |
59 | * NAL unit | ||
60 | * |- NAL header -|------ RBSP ------| | ||
61 | * | ||
62 | * NAL unit: Network abstraction layer unit. The combination of a NAL | ||
63 | * header and an RBSP. | ||
64 | * NAL header: the encapsulation unit for transport-specific metadata in | ||
65 | * an h264 stream. Exactly one byte. | ||
66 | * RBSP: raw bit-stream payload. The actual encoded video data. | 44 | * RBSP: raw bit-stream payload. The actual encoded video data. |
67 | * | 45 | * |
68 | * SPS: sequence parameter set. Part of the RBSP. Metadata to be applied | 46 | * SPS: sequence parameter set. Part of the RBSP. Metadata to be applied |
69 | * to a complete video sequence, like width and height. | 47 | * to a complete video sequence, like width and height. |
70 | */ | 48 | */ |
71 | this.getSps0Rbsp = function() { // :ByteArray | 49 | this.getSps0Rbsp = function() { // :ByteArray |
72 | // remove emulation bytes. Is this nesessary? is there ever emulation | ||
73 | // bytes in the SPS? | ||
74 | var | 50 | var |
75 | spsCount = 0, | 51 | sps = this.sps[0], |
76 | sps0 = this.sps[0], // :ByteArray | 52 | offset = 1, |
77 | rbspCount = 0, | 53 | start = 1, |
78 | start = 1, // :uint | 54 | written = 0, |
79 | end = sps0.byteLength - 2, // :uint | 55 | end = sps.byteLength - 2, |
80 | rbsp = new Uint8Array(sps0.byteLength), // :ByteArray | 56 | result = new Uint8Array(sps.byteLength); |
81 | offset = 0; // :uint | 57 | |
82 | 58 | // In order to prevent 0x0000 01 from being interpreted as a | |
83 | // H264 requires emulation bytes (0x03) be dropped to interpret NAL | 59 | // NAL start code, occurences of that byte sequence in the |
84 | // units. For instance, 0x8a03b4 should be read as 0x8ab4. | 60 | // RBSP are escaped with an "emulation byte". That turns |
85 | for (offset = start ; offset < end ;) { | 61 | // sequences of 0x0000 01 into 0x0000 0301. When interpreting |
86 | if (3 !== sps0[offset + 2]) { | 62 | // a NAL payload, they must be filtered back out. |
87 | offset += 3; | 63 | while (offset < end) { |
88 | } else if (0 !== sps0[offset + 1]) { | 64 | if (sps[offset] === 0x00 && |
89 | offset += 2; | 65 | sps[offset + 1] === 0x00 && |
90 | } else if (0 !== sps0[offset + 0]) { | 66 | sps[offset + 2] === 0x03) { |
91 | offset += 1; | 67 | result.set(sps.subarray(start, offset + 1), written); |
92 | } else { | 68 | written += offset + 1 - start; |
93 | rbsp.set([0x00, 0x00], rbspCount); | 69 | start = offset + 3; |
94 | spsCount += 2; | 70 | } |
95 | rbspCount += 2; | 71 | offset++; |
96 | 72 | } | |
97 | if (offset > start) { | 73 | result.set(sps.subarray(start), written); |
98 | // If there are bytes to write, write them | 74 | return result.subarray(0, written + (sps.byteLength - start)); |
99 | rbsp.set(sps0.subarray(start, offset - start), rbspCount); | ||
100 | spsCount += offset - start; | ||
101 | rbspCount += offset - start; | ||
102 | } | ||
103 | |||
104 | // skip the emulation bytes | ||
105 | offset += 3; | ||
106 | start = offset; | ||
107 | } | ||
108 | } | ||
109 | |||
110 | // copy any remaining bytes | ||
111 | rbsp.set(sps0.subarray(spsCount), rbspCount); // sps0.readBytes(rbsp, rbsp.length); | ||
112 | |||
113 | return rbsp; | ||
114 | }; | 75 | }; |
115 | 76 | ||
116 | // (pts:uint):FlvTag | 77 | // (pts:uint):FlvTag |
... | @@ -257,8 +218,23 @@ | ... | @@ -257,8 +218,23 @@ |
257 | }; | 218 | }; |
258 | }, | 219 | }, |
259 | 220 | ||
221 | NALUnitType; | ||
222 | |||
223 | /** | ||
224 | * Network Abstraction Layer (NAL) units are the packets of an H264 | ||
225 | * stream. NAL units are divided into types based on their payload | ||
226 | * data. Each type has a unique numeric identifier. | ||
227 | * | ||
228 | * NAL unit | ||
229 | * |- NAL header -|------ RBSP ------| | ||
230 | * | ||
231 | * NAL unit: Network abstraction layer unit. The combination of a NAL | ||
232 | * header and an RBSP. | ||
233 | * NAL header: the encapsulation unit for transport-specific metadata in | ||
234 | * an h264 stream. Exactly one byte. | ||
235 | */ | ||
260 | // incomplete, see Table 7.1 of ITU-T H.264 for 12-32 | 236 | // incomplete, see Table 7.1 of ITU-T H.264 for 12-32 |
261 | NALUnitType = { | 237 | window.videojs.hls.NALUnitType = NALUnitType = { |
262 | unspecified: 0, | 238 | unspecified: 0, |
263 | slice_layer_without_partitioning_rbsp_non_idr: 1, | 239 | slice_layer_without_partitioning_rbsp_non_idr: 1, |
264 | slice_data_partition_a_layer_rbsp: 2, | 240 | slice_data_partition_a_layer_rbsp: 2, |
... | @@ -277,7 +253,7 @@ | ... | @@ -277,7 +253,7 @@ |
277 | var | 253 | var |
278 | next_pts, // :uint; | 254 | next_pts, // :uint; |
279 | next_dts, // :uint; | 255 | next_dts, // :uint; |
280 | pts_delta = -1, // :int | 256 | pts_offset, // :int |
281 | 257 | ||
282 | h264Frame, // :FlvTag | 258 | h264Frame, // :FlvTag |
283 | 259 | ||
... | @@ -292,15 +268,14 @@ | ... | @@ -292,15 +268,14 @@ |
292 | 268 | ||
293 | //(pts:uint, dts:uint, dataAligned:Boolean):void | 269 | //(pts:uint, dts:uint, dataAligned:Boolean):void |
294 | this.setNextTimeStamp = function(pts, dts, dataAligned) { | 270 | this.setNextTimeStamp = function(pts, dts, dataAligned) { |
295 | if (pts_delta < 0) { | 271 | // on the first invocation, capture the starting PTS value |
296 | // We assume the very first pts is less than 0x8FFFFFFF (max signed | 272 | pts_offset = pts; |
297 | // int32) | ||
298 | pts_delta = pts; | ||
299 | } | ||
300 | 273 | ||
274 | // on subsequent invocations, calculate the PTS based on the starting offset | ||
275 | this.setNextTimeStamp = function(pts, dts, dataAligned) { | ||
301 | // We could end up with a DTS less than 0 here. We need to deal with that! | 276 | // We could end up with a DTS less than 0 here. We need to deal with that! |
302 | next_pts = pts - pts_delta; | 277 | next_pts = pts - pts_offset; |
303 | next_dts = dts - pts_delta; | 278 | next_dts = dts - pts_offset; |
304 | 279 | ||
305 | // If data is aligned, flush all internal buffers | 280 | // If data is aligned, flush all internal buffers |
306 | if (dataAligned) { | 281 | if (dataAligned) { |
... | @@ -308,6 +283,9 @@ | ... | @@ -308,6 +283,9 @@ |
308 | } | 283 | } |
309 | }; | 284 | }; |
310 | 285 | ||
286 | this.setNextTimeStamp(pts, dts, dataAligned); | ||
287 | }; | ||
288 | |||
311 | this.finishFrame = function() { | 289 | this.finishFrame = function() { |
312 | if (h264Frame) { | 290 | if (h264Frame) { |
313 | // Push SPS before EVERY IDR frame for seeking | 291 | // Push SPS before EVERY IDR frame for seeking |
... | @@ -395,7 +373,7 @@ | ... | @@ -395,7 +373,7 @@ |
395 | data[offset + 1] === 0 && | 373 | data[offset + 1] === 0 && |
396 | data[offset + 2] === 1) { | 374 | data[offset + 2] === 1) { |
397 | // 00 : 00 00 01 | 375 | // 00 : 00 00 01 |
398 | h264Frame.length -= 1; | 376 | // h264Frame.length -= 1; |
399 | state = 3; | 377 | state = 3; |
400 | return this.writeBytes(data, offset + 3, length - 3); | 378 | return this.writeBytes(data, offset + 3, length - 3); |
401 | } | 379 | } |
... | @@ -466,7 +444,6 @@ | ... | @@ -466,7 +444,6 @@ |
466 | h264Frame.endNalUnit(newExtraData.pps); | 444 | h264Frame.endNalUnit(newExtraData.pps); |
467 | break; | 445 | break; |
468 | case NALUnitType.slice_layer_without_partitioning_rbsp_idr: | 446 | case NALUnitType.slice_layer_without_partitioning_rbsp_idr: |
469 | h264Frame.keyFrame = true; | ||
470 | h264Frame.endNalUnit(); | 447 | h264Frame.endNalUnit(); |
471 | break; | 448 | break; |
472 | default: | 449 | default: |
... | @@ -477,8 +454,13 @@ | ... | @@ -477,8 +454,13 @@ |
477 | 454 | ||
478 | // setup to begin processing the new NAL unit | 455 | // setup to begin processing the new NAL unit |
479 | nalUnitType = data[offset] & 0x1F; | 456 | nalUnitType = data[offset] & 0x1F; |
480 | if (h264Frame && 9 === nalUnitType) { | 457 | if (h264Frame) { |
481 | this.finishFrame(); // We are starting a new access unit. Flush the previous one | 458 | if (nalUnitType === NALUnitType.access_unit_delimiter_rbsp) { |
459 | // starting a new access unit, flush the previous one | ||
460 | this.finishFrame(); | ||
461 | } else if (nalUnitType === NALUnitType.slice_layer_without_partitioning_rbsp_idr) { | ||
462 | h264Frame.keyFrame = true; | ||
463 | } | ||
482 | } | 464 | } |
483 | 465 | ||
484 | // finishFrame may render h264Frame null, so we must test again | 466 | // finishFrame may render h264Frame null, so we must test again | ... | ... |
... | @@ -18,8 +18,7 @@ | ... | @@ -18,8 +18,7 @@ |
18 | streamBuffer = new Uint8Array(MP2T_PACKET_LENGTH), | 18 | streamBuffer = new Uint8Array(MP2T_PACKET_LENGTH), |
19 | streamBufferByteCount = 0, | 19 | streamBufferByteCount = 0, |
20 | h264Stream = new H264Stream(), | 20 | h264Stream = new H264Stream(), |
21 | aacStream = new AacStream(), | 21 | aacStream = new AacStream(); |
22 | seekToKeyFrame = false; | ||
23 | 22 | ||
24 | // expose the stream metadata | 23 | // expose the stream metadata |
25 | self.stream = { | 24 | self.stream = { |
... | @@ -84,60 +83,35 @@ | ... | @@ -84,60 +83,35 @@ |
84 | self.flushTags = function() { | 83 | self.flushTags = function() { |
85 | h264Stream.finishFrame(); | 84 | h264Stream.finishFrame(); |
86 | }; | 85 | }; |
87 | self.doSeek = function() { | ||
88 | self.flushTags(); | ||
89 | aacStream.tags.length = 0; | ||
90 | h264Stream.tags.length = 0; | ||
91 | seekToKeyFrame = true; | ||
92 | }; | ||
93 | 86 | ||
87 | /** | ||
88 | * Returns whether a call to `getNextTag()` will be successful. | ||
89 | * @return {boolean} whether there is at least one transmuxed FLV | ||
90 | * tag ready | ||
91 | */ | ||
94 | self.tagsAvailable = function() { // :int { | 92 | self.tagsAvailable = function() { // :int { |
95 | var i, pts; // :uint | ||
96 | |||
97 | if (seekToKeyFrame) { | ||
98 | for (i = 0 ; i < h264Stream.tags.length && seekToKeyFrame; ++i) { | ||
99 | if (h264Stream.tags[i].keyFrame) { | ||
100 | seekToKeyFrame = false; // We found, a keyframe, stop seeking | ||
101 | } | ||
102 | } | ||
103 | |||
104 | if (seekToKeyFrame) { | ||
105 | // we didnt find a keyframe. yet | ||
106 | h264Stream.tags.length = 0; | ||
107 | return 0; | ||
108 | } | ||
109 | |||
110 | // TODO we MAY need to use dts, not pts | ||
111 | h264Stream.tags = h264Stream.tags.slice(i); | ||
112 | pts = h264Stream.tags[0].pts; | ||
113 | |||
114 | // Remove any audio before the found keyframe | ||
115 | while( 0 < aacStream.tags.length && pts > aacStream.tags[0].pts ) { | ||
116 | aacStream.tags.shift(); | ||
117 | } | ||
118 | } | ||
119 | |||
120 | return h264Stream.tags.length + aacStream.tags.length; | 93 | return h264Stream.tags.length + aacStream.tags.length; |
121 | }; | 94 | }; |
122 | 95 | ||
123 | self.getNextTag = function() { // :ByteArray { | 96 | /** |
124 | var tag; // :FlvTag; // return tags in approximate dts order | 97 | * Returns the next tag in decoder-timestamp (DTS) order. |
125 | 98 | * @returns {object} the next tag to decoded. | |
126 | if (0 === self.tagsAvailable()) { | 99 | */ |
127 | throw new Error("getNextTag() called when 0 == tagsAvailable()"); | 100 | self.getNextTag = function() { |
128 | } | 101 | var tag; |
129 | 102 | ||
130 | if (0 < h264Stream.tags.length) { | 103 | if (!h264Stream.tags.length) { |
131 | if (0 < aacStream.tags.length && aacStream.tags[0].dts < h264Stream.tags[0].dts) { | 104 | // only audio tags remain |
132 | tag = aacStream.tags.shift(); | 105 | tag = aacStream.tags.shift(); |
133 | } else { | 106 | } else if (!aacStream.tags.length) { |
107 | // only video tags remain | ||
134 | tag = h264Stream.tags.shift(); | 108 | tag = h264Stream.tags.shift(); |
135 | } | 109 | } else if (aacStream.tags[0].dts < h264Stream.tags[0].dts) { |
136 | } else if ( 0 < aacStream.tags.length ) { | 110 | // audio should be decoded next |
137 | tag = aacStream.tags.shift(); | 111 | tag = aacStream.tags.shift(); |
138 | } else { | 112 | } else { |
139 | // We dont have any tags available to return | 113 | // video should be decoded next |
140 | return new Uint8Array(); | 114 | tag = h264Stream.tags.shift(); |
141 | } | 115 | } |
142 | 116 | ||
143 | return tag.finalize(); | 117 | return tag.finalize(); | ... | ... |
... | @@ -21,6 +21,7 @@ | ... | @@ -21,6 +21,7 @@ |
21 | */ | 21 | */ |
22 | var | 22 | var |
23 | buffer, | 23 | buffer, |
24 | ExpGolomb = window.videojs.hls.ExpGolomb, | ||
24 | expGolomb; | 25 | expGolomb; |
25 | 26 | ||
26 | module('Exponential Golomb coding'); | 27 | module('Exponential Golomb coding'); |
... | @@ -44,32 +45,62 @@ test('small numbers are coded correctly', function() { | ... | @@ -44,32 +45,62 @@ test('small numbers are coded correctly', function() { |
44 | 45 | ||
45 | while (i--) { | 46 | while (i--) { |
46 | buffer = new Uint8Array([expected[i][0]]); | 47 | buffer = new Uint8Array([expected[i][0]]); |
47 | expGolomb = new window.videojs.hls.ExpGolomb(buffer); | 48 | expGolomb = new ExpGolomb(buffer); |
48 | result = expGolomb.readUnsignedExpGolomb(); | 49 | result = expGolomb.readUnsignedExpGolomb(); |
49 | equal(expected[i][1], result, expected[i][0] + ' is decoded to ' + expected[i][1]); | 50 | equal(expected[i][1], result, expected[i][0] + ' is decoded to ' + expected[i][1]); |
50 | } | 51 | } |
51 | }); | 52 | }); |
52 | 53 | ||
53 | test('drops working data as it is parsed', function() { | 54 | test('drops working data as it is parsed', function() { |
54 | var expGolomb = new window.videojs.hls.ExpGolomb(new Uint8Array([0x00, 0xFF])); | 55 | var expGolomb = new ExpGolomb(new Uint8Array([0x00, 0xFF])); |
55 | expGolomb.skipBits(8); | 56 | expGolomb.skipBits(8); |
56 | equal(8, expGolomb.bitsAvailable(), '8 bits remain'); | 57 | equal(8, expGolomb.bitsAvailable(), '8 bits remain'); |
57 | equal(0xFF, expGolomb.readBits(8), 'the second byte is read'); | 58 | equal(0xFF, expGolomb.readBits(8), 'the second byte is read'); |
58 | }); | 59 | }); |
59 | 60 | ||
60 | test('drops working data when skipping leading zeros', function() { | 61 | test('drops working data when skipping leading zeros', function() { |
61 | var expGolomb = new window.videojs.hls.ExpGolomb(new Uint8Array([0x00, 0x00, 0x00, 0x00, 0xFF])); | 62 | var expGolomb = new ExpGolomb(new Uint8Array([0x00, 0x00, 0x00, 0x00, 0xFF])); |
62 | equal(32, expGolomb.skipLeadingZeros(), '32 leading zeros are dropped'); | 63 | equal(32, expGolomb.skipLeadingZeros(), '32 leading zeros are dropped'); |
63 | equal(8, expGolomb.bitsAvailable(), '8 bits remain'); | 64 | equal(8, expGolomb.bitsAvailable(), '8 bits remain'); |
64 | equal(0xFF, expGolomb.readBits(8), 'the second byte is read'); | 65 | equal(0xFF, expGolomb.readBits(8), 'the second byte is read'); |
65 | }); | 66 | }); |
66 | 67 | ||
67 | test('drops working data when skipping leading zeros', function() { | 68 | test('drops working data when skipping leading zeros', function() { |
68 | var expGolomb = new window.videojs.hls.ExpGolomb(new Uint8Array([0x15, 0xab, 0x40, 0xc8, 0xFF])); | 69 | var expGolomb = new ExpGolomb(new Uint8Array([0x15, 0xab, 0x40, 0xc8, 0xFF])); |
69 | equal(3, expGolomb.skipLeadingZeros(), '3 leading zeros are dropped'); | 70 | equal(3, expGolomb.skipLeadingZeros(), '3 leading zeros are dropped'); |
70 | equal((8 * 4) + 5, expGolomb.bitsAvailable(), '37 bits remain'); | 71 | equal((8 * 4) + 5, expGolomb.bitsAvailable(), '37 bits remain'); |
71 | expGolomb.skipBits(1); | 72 | expGolomb.skipBits(1); |
72 | equal(0x5a, expGolomb.readBits(8), 'the next bits are read'); | 73 | equal(0x5a, expGolomb.readBits(8), 'the next bits are read'); |
73 | }); | 74 | }); |
74 | 75 | ||
76 | test('parses a sequence parameter set', function() { | ||
77 | var | ||
78 | sps = new Uint8Array([ | ||
79 | 0x27, 0x42, 0xe0, 0x0b, | ||
80 | 0xa9, 0x18, 0x60, 0x9d, | ||
81 | 0x80, 0x35, 0x06, 0x01, | ||
82 | 0x06, 0xb6, 0xc2, 0xb5, | ||
83 | 0xef, 0x7c, 0x04 | ||
84 | ]), | ||
85 | expGolomb = new ExpGolomb(sps); | ||
86 | |||
87 | strictEqual(expGolomb.readBits(8), 0x27, 'the NAL type specifies an SPS'); | ||
88 | strictEqual(expGolomb.readBits(8), 66, 'profile_idc is 66'); | ||
89 | strictEqual(expGolomb.readBits(4), 0x0E, 'constraints 0-3 are correct'); | ||
90 | |||
91 | expGolomb.skipBits(4); | ||
92 | strictEqual(expGolomb.readBits(8), 11, 'level_idc is 11'); | ||
93 | strictEqual(expGolomb.readUnsignedExpGolomb(), 0, 'seq_parameter_set_id is 0'); | ||
94 | strictEqual(expGolomb.readUnsignedExpGolomb(), 1, 'log2_max_frame_num_minus4 is 1'); | ||
95 | strictEqual(expGolomb.readUnsignedExpGolomb(), 0, 'pic_order_cnt_type is 0'); | ||
96 | strictEqual(expGolomb.readUnsignedExpGolomb(), 3, 'log2_max_pic_order_cnt_lsb_minus4 is 3'); | ||
97 | strictEqual(expGolomb.readUnsignedExpGolomb(), 2, 'max_num_ref_frames is 2'); | ||
98 | strictEqual(expGolomb.readBits(1), 0, 'gaps_in_frame_num_value_allowed_flag is false'); | ||
99 | strictEqual(expGolomb.readUnsignedExpGolomb(), 11, 'pic_width_in_mbs_minus1 is 11'); | ||
100 | strictEqual(expGolomb.readUnsignedExpGolomb(), 8, 'pic_height_in_map_units_minus1 is 8'); | ||
101 | strictEqual(expGolomb.readBits(1), 1, 'frame_mbs_only_flag is true'); | ||
102 | strictEqual(expGolomb.readBits(1), 1, 'direct_8x8_inference_flag is true'); | ||
103 | strictEqual(expGolomb.readBits(1), 0, 'frame_cropping_flag is false'); | ||
104 | }); | ||
105 | |||
75 | })(this); | 106 | })(this); | ... | ... |
test/h264-stream_test.js
0 → 100644
1 | (function(videojs) { | ||
2 | module('H264 Stream'); | ||
3 | |||
4 | var | ||
5 | nalUnitTypes = window.videojs.hls.NALUnitType, | ||
6 | FlvTag = window.videojs.hls.FlvTag; | ||
7 | |||
8 | test('metadata is generated for IDRs after a full NAL unit is written', function() { | ||
9 | var | ||
10 | h264Stream = new videojs.hls.H264Stream(), | ||
11 | accessUnitDelimiter = new Uint8Array([ | ||
12 | 0x00, | ||
13 | 0x00, | ||
14 | 0x01, | ||
15 | nalUnitTypes.access_unit_delimiter_rbsp | ||
16 | ]), | ||
17 | seqParamSet = new Uint8Array([ | ||
18 | 0x00, | ||
19 | 0x00, | ||
20 | 0x01, | ||
21 | 0x60 | nalUnitTypes.seq_parameter_set_rbsp, | ||
22 | 0x00, // profile_idc | ||
23 | 0x00, // constraint_set flags | ||
24 | 0x00, // level_idc | ||
25 | // seq_parameter_set_id ue(v) 0 => 1 | ||
26 | // log2_max_frame_num_minus4 ue(v) 1 => 010 | ||
27 | // pic_order_cnt_type ue(v) 0 => 1 | ||
28 | // log2_max_pic_order_cnt_lsb_minus4 ue(v) 1 => 010 | ||
29 | // max_num_ref_frames ue(v) 1 => 010 | ||
30 | // gaps_in_frame_num_value_allowed u(1) 0 | ||
31 | // pic_width_in_mbs_minus1 ue(v) 0 => 1 | ||
32 | // pic_height_in_map_units_minus1 ue(v) 0 => 1 | ||
33 | // frame_mbs_only_flag u(1) 1 | ||
34 | // direct_8x8_inference_flag u(1) 0 | ||
35 | // frame_cropping_flag u(1) 0 | ||
36 | // vui_parameters_present_flag u(1) 0 | ||
37 | // 1010 1010 0100 1110 00(00 0000) | ||
38 | 0xAA, | ||
39 | 0x4E, | ||
40 | 0x00 | ||
41 | ]), | ||
42 | idr = new Uint8Array([ | ||
43 | 0x00, | ||
44 | 0x00, | ||
45 | 0x01, | ||
46 | nalUnitTypes.slice_layer_without_partitioning_rbsp_idr | ||
47 | ]); | ||
48 | |||
49 | h264Stream.setNextTimeStamp(0, 0, true); | ||
50 | h264Stream.writeBytes(accessUnitDelimiter, 0, accessUnitDelimiter.byteLength); | ||
51 | h264Stream.writeBytes(seqParamSet, 0, seqParamSet.byteLength); | ||
52 | h264Stream.writeBytes(idr, 0, idr.byteLength); | ||
53 | h264Stream.setNextTimeStamp(1, 1, true); | ||
54 | |||
55 | strictEqual(h264Stream.tags.length, 3, 'three tags are written'); | ||
56 | ok(FlvTag.isMetaData(h264Stream.tags[0].bytes), | ||
57 | 'metadata is written'); | ||
58 | ok(FlvTag.isVideoFrame(h264Stream.tags[1].bytes), | ||
59 | 'picture parameter set is written'); | ||
60 | ok(h264Stream.tags[2].keyFrame, 'key frame is written'); | ||
61 | }); | ||
62 | |||
63 | test('starting PTS values can be negative', function() { | ||
64 | var | ||
65 | h264Stream = new videojs.hls.H264Stream(), | ||
66 | accessUnitDelimiter = new Uint8Array([ | ||
67 | 0x00, | ||
68 | 0x00, | ||
69 | 0x01, | ||
70 | nalUnitTypes.access_unit_delimiter_rbsp | ||
71 | ]); | ||
72 | |||
73 | h264Stream.setNextTimeStamp(-100, -100, true); | ||
74 | h264Stream.writeBytes(accessUnitDelimiter, 0, accessUnitDelimiter.byteLength); | ||
75 | h264Stream.setNextTimeStamp(-99, -99, true); | ||
76 | h264Stream.writeBytes(accessUnitDelimiter, 0, accessUnitDelimiter.byteLength); | ||
77 | h264Stream.setNextTimeStamp(0, 0, true); | ||
78 | h264Stream.writeBytes(accessUnitDelimiter, 0, accessUnitDelimiter.byteLength); | ||
79 | // flush out the last tag | ||
80 | h264Stream.writeBytes(accessUnitDelimiter, 0, accessUnitDelimiter.byteLength); | ||
81 | |||
82 | strictEqual(h264Stream.tags.length, 3, 'three tags are ready'); | ||
83 | strictEqual(h264Stream.tags[0].pts, 0, 'the first PTS is zero'); | ||
84 | strictEqual(h264Stream.tags[0].dts, 0, 'the first DTS is zero'); | ||
85 | strictEqual(h264Stream.tags[1].pts, 1, 'the second PTS is one'); | ||
86 | strictEqual(h264Stream.tags[1].dts, 1, 'the second DTS is one'); | ||
87 | |||
88 | strictEqual(h264Stream.tags[2].pts, 100, 'the third PTS is 100'); | ||
89 | strictEqual(h264Stream.tags[2].dts, 100, 'the third DTS is 100'); | ||
90 | }); | ||
91 | |||
92 | })(window.videojs); |
test/muxer/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 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
test/muxer/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/muxer/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/muxer/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></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 | |||
16 | <script src="js/vendor/modernizr-2.6.2.min.js"></script> | ||
17 | </head> | ||
18 | <body> | ||
19 | <!--[if lt IE 7]> | ||
20 | <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> | ||
21 | <![endif]--> | ||
22 | |||
23 | <div class="header-container"> | ||
24 | <header class="wrapper clearfix"> | ||
25 | <h1 class="title">Transmux Analyzer</h1> | ||
26 | </header> | ||
27 | </div> | ||
28 | |||
29 | <div class="main-container"> | ||
30 | <div class="main wrapper clearfix"> | ||
31 | |||
32 | <article> | ||
33 | <header> | ||
34 | <p> | ||
35 | This page can help you compare the results of the | ||
36 | transmuxing performed by videojs-contrib-hls with a known, | ||
37 | working file produced by another tool. You could use | ||
38 | ffmpeg to transform an MPEG-2 transport stream into an FLV | ||
39 | with a command like this: | ||
40 | <pre>ffmpeg -i input.ts -acodec copy -vcodec copy output.flv</pre> | ||
41 | </p> | ||
42 | </header> | ||
43 | <section> | ||
44 | <h2>Inputs</h2> | ||
45 | <form id="inputs"> | ||
46 | <label> | ||
47 | Your original MP2T segment: | ||
48 | <input type="file" id="original"> | ||
49 | </label> | ||
50 | <label> | ||
51 | A working, FLV version of the underlying stream | ||
52 | produced by another tool: | ||
53 | <input type="file" id="working"> | ||
54 | </label> | ||
55 | </form> | ||
56 | </section> | ||
57 | <section> | ||
58 | <h2>Tag Comparison</h2> | ||
59 | <div class="result-wrapper"> | ||
60 | <h3>videojs-contrib-hls</h3> | ||
61 | <ol class="vjs-tags"> | ||
62 | </ol> | ||
63 | </div> | ||
64 | <div class="result-wrapper"> | ||
65 | <h3>Working</h3> | ||
66 | <ol class="working-tags"> | ||
67 | </ol> | ||
68 | </div> | ||
69 | </section> | ||
70 | <section> | ||
71 | <h2>Results</h2> | ||
72 | <div class="result-wrapper"> | ||
73 | <h3>videojs-contrib-hls</h3> | ||
74 | <div class="vjs-hls-output result"> | ||
75 | <p> | ||
76 | The results of transmuxing your input file with | ||
77 | videojs-contrib-hls will show up here. | ||
78 | </p> | ||
79 | </div> | ||
80 | </div> | ||
81 | <div class="result-wrapper"> | ||
82 | <h3>Working</h3> | ||
83 | <div class="working-output result"> | ||
84 | <p> | ||
85 | The "good" version of the file will show up here. | ||
86 | </p> | ||
87 | </div> | ||
88 | </div> | ||
89 | </section> | ||
90 | </article> | ||
91 | |||
92 | </div> <!-- #main --> | ||
93 | </div> <!-- #main-container --> | ||
94 | |||
95 | <div class="footer-container"> | ||
96 | <footer class="wrapper"> | ||
97 | <h3>footer</h3> | ||
98 | </footer> | ||
99 | </div> | ||
100 | |||
101 | |||
102 | <!-- transmuxing --> | ||
103 | <script src="../../src/flv-tag.js"></script> | ||
104 | <script src="../../src/exp-golomb.js"></script> | ||
105 | <script src="../../src/h264-stream.js"></script> | ||
106 | <script src="../../src/aac-stream.js"></script> | ||
107 | <script src="../../src/segment-parser.js"></script> | ||
108 | |||
109 | <script src="../../src/bin-utils.js"></script> | ||
110 | <script> | ||
111 | var inputs = document.getElementById('inputs'), | ||
112 | original = document.getElementById('original'), | ||
113 | working = document.getElementById('working'), | ||
114 | |||
115 | vjsTags = document.querySelector('.vjs-tags'), | ||
116 | workingTags = document.querySelector('.working-tags'), | ||
117 | |||
118 | vjsOutput = document.querySelector('.vjs-hls-output'), | ||
119 | workingOutput = document.querySelector('.working-output'), | ||
120 | |||
121 | tagTypes = { | ||
122 | 0x08: 'audio', | ||
123 | 0x09: 'video', | ||
124 | 0x12: 'metadata' | ||
125 | }; | ||
126 | |||
127 | original.addEventListener('change', function() { | ||
128 | var reader = new FileReader(); | ||
129 | reader.addEventListener('loadend', function() { | ||
130 | var parser = new videojs.hls.SegmentParser(), | ||
131 | tags = [parser.getFlvHeader()], | ||
132 | tag, | ||
133 | hex, | ||
134 | li, | ||
135 | byteLength = 0, | ||
136 | data, | ||
137 | i, | ||
138 | pos; | ||
139 | |||
140 | // clear old tag info | ||
141 | vjsTags.innerHTML = ''; | ||
142 | |||
143 | parser.parseSegmentBinaryData(new Uint8Array(reader.result)); | ||
144 | |||
145 | // collect all the tags | ||
146 | while (parser.tagsAvailable()) { | ||
147 | tag = parser.getNextTag(); | ||
148 | tags.push(tag.bytes); | ||
149 | li = document.createElement('li'); | ||
150 | li.innerHTML = tagTypes[tag.bytes[0]] + ': ' + tag.bytes.byteLength + 'B'; | ||
151 | vjsTags.appendChild(li); | ||
152 | } | ||
153 | // create a uint8array for the entire segment and copy everything over | ||
154 | i = tags.length; | ||
155 | while (i--) { | ||
156 | byteLength += tags[i].byteLength; | ||
157 | } | ||
158 | data = new Uint8Array(byteLength); | ||
159 | i = tags.length; | ||
160 | pos = byteLength; | ||
161 | while (i--) { | ||
162 | pos -= tags[i].byteLength; | ||
163 | data.set(tags[i], pos); | ||
164 | } | ||
165 | |||
166 | hex = '<pre>' | ||
167 | hex += videojs.hls.utils.hexDump(data); | ||
168 | hex += '</pre>' | ||
169 | |||
170 | vjsOutput.innerHTML = hex; | ||
171 | }); | ||
172 | reader.readAsArrayBuffer(this.files[0]); | ||
173 | }, false); | ||
174 | |||
175 | working.addEventListener('change', function() { | ||
176 | var reader = new FileReader(); | ||
177 | reader.addEventListener('loadend', function() { | ||
178 | var hex = '<pre>', | ||
179 | bytes = new Uint8Array(reader.result), | ||
180 | i = 9, // header | ||
181 | dataSize, | ||
182 | li; | ||
183 | |||
184 | // clear old tag info | ||
185 | workingTags.innerHTML = ''; | ||
186 | |||
187 | // traverse the tags | ||
188 | i += 4; // previous tag size | ||
189 | while (i < bytes.byteLength) { | ||
190 | dataSize = bytes[i + 1] << 16; | ||
191 | dataSize |= bytes[i + 2] << 8; | ||
192 | dataSize |= bytes[i + 3]; | ||
193 | dataSize += 11; | ||
194 | |||
195 | li = document.createElement('li'); | ||
196 | li.innerHTML = tagTypes[bytes[i]] + ': ' + dataSize + 'B'; | ||
197 | workingTags.appendChild(li); | ||
198 | |||
199 | i += dataSize; // tag size | ||
200 | i += 4; // previous tag size | ||
201 | } | ||
202 | |||
203 | // output the hex dump | ||
204 | hex += videojs.hls.utils.hexDump(bytes); | ||
205 | hex += '</pre>'; | ||
206 | workingOutput.innerHTML = hex; | ||
207 | }); | ||
208 | reader.readAsArrayBuffer(this.files[0]); | ||
209 | }, false); | ||
210 | </script> | ||
211 | <script type="text/plain"> | ||
212 | // map nal_unit_types to friendly names | ||
213 | console.log([ | ||
214 | 'unspecified', | ||
215 | 'slice_layer_without_partitioning', | ||
216 | 'slice_data_partition_a_layer', | ||
217 | 'slice_data_partition_b_layer', | ||
218 | 'slice_data_partition_c_layer', | ||
219 | 'slice_layer_without_partitioning_idr', | ||
220 | 'sei', | ||
221 | 'seq_parameter_set', | ||
222 | 'pic_parameter_set', | ||
223 | 'access_unit_delimiter', | ||
224 | 'end_of_seq', | ||
225 | 'end_of_stream', | ||
226 | 'filler', | ||
227 | 'seq_parameter_set_ext', | ||
228 | 'prefix_nal_unit', | ||
229 | 'subset_seq_parameter_set', | ||
230 | 'reserved', | ||
231 | 'reserved', | ||
232 | 'reserved' | ||
233 | ][nalUnitType]); | ||
234 | </script> | ||
235 | </body> | ||
236 | </html> |
test/muxer/js/main.js
0 → 100644
test/muxer/js/vendor/modernizr-2.6.2.min.js
0 → 100644
This diff is collapsed.
Click to expand it.
... | @@ -44,6 +44,7 @@ | ... | @@ -44,6 +44,7 @@ |
44 | </script> | 44 | </script> |
45 | <script src="videojs-hls_test.js"></script> | 45 | <script src="videojs-hls_test.js"></script> |
46 | <script src="segment-parser.js"></script> | 46 | <script src="segment-parser.js"></script> |
47 | <script src="h264-stream_test.js"></script> | ||
47 | <script src="exp-golomb_test.js"></script> | 48 | <script src="exp-golomb_test.js"></script> |
48 | <script src="flv-tag_test.js"></script> | 49 | <script src="flv-tag_test.js"></script> |
49 | <script src="m3u8_test.js"></script> | 50 | <script src="m3u8_test.js"></script> | ... | ... |
-
Please register or sign in to post a comment