1 |
|
2 |
|
3 |
|
4 | import SegmentLoader from './segment-loader';
|
5 | import videojs from 'video.js';
|
6 | import window from 'global/window';
|
7 | import removeCuesFromTrack from
|
8 | 'videojs-contrib-media-sources/es5/remove-cues-from-track.js';
|
9 | import { initSegmentId } from './bin-utils';
|
10 |
|
11 | const VTT_LINE_TERMINATORS =
|
12 | new Uint8Array('\n\n'.split('').map(char => char.charCodeAt(0)));
|
13 |
|
14 | const uintToString = function(uintArray) {
|
15 | return String.fromCharCode.apply(null, uintArray);
|
16 | };
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | export default class VTTSegmentLoader extends SegmentLoader {
|
26 | constructor(settings, options = {}) {
|
27 | super(settings, options);
|
28 |
|
29 |
|
30 |
|
31 | this.mediaSource_ = null;
|
32 |
|
33 | this.subtitlesTrack_ = null;
|
34 | }
|
35 |
|
36 | |
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 | buffered_() {
|
43 | if (!this.subtitlesTrack_ || !this.subtitlesTrack_.cues.length) {
|
44 | return videojs.createTimeRanges();
|
45 | }
|
46 |
|
47 | const cues = this.subtitlesTrack_.cues;
|
48 | let start = cues[0].startTime;
|
49 | let end = cues[cues.length - 1].startTime;
|
50 |
|
51 | return videojs.createTimeRanges([[start, end]]);
|
52 | }
|
53 |
|
54 | |
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 | initSegment(map, set = false) {
|
65 | if (!map) {
|
66 | return null;
|
67 | }
|
68 |
|
69 | const id = initSegmentId(map);
|
70 | let storedMap = this.initSegments_[id];
|
71 |
|
72 | if (set && !storedMap && map.bytes) {
|
73 |
|
74 |
|
75 |
|
76 |
|
77 | const combinedByteLength = VTT_LINE_TERMINATORS.byteLength + map.bytes.byteLength;
|
78 | const combinedSegment = new Uint8Array(combinedByteLength);
|
79 |
|
80 | combinedSegment.set(map.bytes);
|
81 | combinedSegment.set(VTT_LINE_TERMINATORS, map.bytes.byteLength);
|
82 |
|
83 | this.initSegments_[id] = storedMap = {
|
84 | resolvedUri: map.resolvedUri,
|
85 | byterange: map.byterange,
|
86 | bytes: combinedSegment
|
87 | };
|
88 | }
|
89 |
|
90 | return storedMap || map;
|
91 | }
|
92 |
|
93 | |
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 | couldBeginLoading_() {
|
100 | return this.playlist_ &&
|
101 | this.subtitlesTrack_ &&
|
102 | !this.paused();
|
103 | }
|
104 |
|
105 | |
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 | init_() {
|
113 | this.state = 'READY';
|
114 | this.resetEverything();
|
115 | return this.monitorBuffer_();
|
116 | }
|
117 |
|
118 | |
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 | track(track) {
|
127 | if (typeof track === 'undefined') {
|
128 | return this.subtitlesTrack_;
|
129 | }
|
130 |
|
131 | this.subtitlesTrack_ = track;
|
132 |
|
133 |
|
134 |
|
135 | if (this.state === 'INIT' && this.couldBeginLoading_()) {
|
136 | this.init_();
|
137 | }
|
138 |
|
139 | return this.subtitlesTrack_;
|
140 | }
|
141 |
|
142 | |
143 |
|
144 |
|
145 |
|
146 |
|
147 | remove(start, end) {
|
148 | removeCuesFromTrack(start, end, this.subtitlesTrack_);
|
149 | }
|
150 |
|
151 | |
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 | fillBuffer_() {
|
161 | if (!this.syncPoint_) {
|
162 | this.syncPoint_ = this.syncController_.getSyncPoint(this.playlist_,
|
163 | this.duration_(),
|
164 | this.currentTimeline_,
|
165 | this.currentTime_());
|
166 | }
|
167 |
|
168 |
|
169 | let segmentInfo = this.checkBuffer_(this.buffered_(),
|
170 | this.playlist_,
|
171 | this.mediaIndex,
|
172 | this.hasPlayed_(),
|
173 | this.currentTime_(),
|
174 | this.syncPoint_);
|
175 |
|
176 | segmentInfo = this.skipEmptySegments_(segmentInfo);
|
177 |
|
178 | if (!segmentInfo) {
|
179 | return;
|
180 | }
|
181 |
|
182 | if (this.syncController_.timestampOffsetForTimeline(segmentInfo.timeline) === null) {
|
183 |
|
184 |
|
185 | let checkTimestampOffset = () => {
|
186 | this.state = 'READY';
|
187 | if (!this.paused()) {
|
188 |
|
189 | this.monitorBuffer_();
|
190 | }
|
191 | };
|
192 |
|
193 | this.syncController_.one('timestampoffset', checkTimestampOffset);
|
194 | this.state = 'WAITING_ON_TIMELINE';
|
195 | return;
|
196 | }
|
197 |
|
198 | this.loadSegment_(segmentInfo);
|
199 | }
|
200 |
|
201 | |
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 | skipEmptySegments_(segmentInfo) {
|
212 | while (segmentInfo && segmentInfo.segment.empty) {
|
213 | segmentInfo = this.generateSegmentInfo_(
|
214 | segmentInfo.playlist,
|
215 | segmentInfo.mediaIndex + 1,
|
216 | segmentInfo.startOfSegment + segmentInfo.duration,
|
217 | segmentInfo.isSyncRequest);
|
218 | }
|
219 | return segmentInfo;
|
220 | }
|
221 |
|
222 | |
223 |
|
224 |
|
225 |
|
226 |
|
227 | handleSegment_() {
|
228 | if (!this.pendingSegment_ || !this.subtitlesTrack_) {
|
229 | this.state = 'READY';
|
230 | return;
|
231 | }
|
232 |
|
233 | this.state = 'APPENDING';
|
234 |
|
235 | let segmentInfo = this.pendingSegment_;
|
236 | let segment = segmentInfo.segment;
|
237 |
|
238 |
|
239 | if (typeof window.WebVTT !== 'function' &&
|
240 | this.subtitlesTrack_ &&
|
241 | this.subtitlesTrack_.tech_) {
|
242 |
|
243 | const loadHandler = () => {
|
244 | this.handleSegment_();
|
245 | };
|
246 |
|
247 | this.state = 'WAITING_ON_VTTJS';
|
248 | this.subtitlesTrack_.tech_.one('vttjsloaded', loadHandler);
|
249 | this.subtitlesTrack_.tech_.one('vttjserror', () => {
|
250 | this.subtitlesTrack_.tech_.off('vttjsloaded', loadHandler);
|
251 | this.error({
|
252 | message: 'Error loading vtt.js'
|
253 | });
|
254 | this.state = 'READY';
|
255 | this.pause();
|
256 | this.trigger('error');
|
257 | });
|
258 |
|
259 | return;
|
260 | }
|
261 |
|
262 | segment.requested = true;
|
263 |
|
264 | try {
|
265 | this.parseVTTCues_(segmentInfo);
|
266 | } catch (e) {
|
267 | this.error({
|
268 | message: e.message
|
269 | });
|
270 | this.state = 'READY';
|
271 | this.pause();
|
272 | return this.trigger('error');
|
273 | }
|
274 |
|
275 | this.updateTimeMapping_(segmentInfo,
|
276 | this.syncController_.timelines[segmentInfo.timeline],
|
277 | this.playlist_);
|
278 |
|
279 | if (segmentInfo.isSyncRequest) {
|
280 | this.trigger('syncinfoupdate');
|
281 | this.pendingSegment_ = null;
|
282 | this.state = 'READY';
|
283 | return;
|
284 | }
|
285 |
|
286 | segmentInfo.byteLength = segmentInfo.bytes.byteLength;
|
287 |
|
288 | this.mediaSecondsLoaded += segment.duration;
|
289 |
|
290 | if (segmentInfo.cues.length) {
|
291 |
|
292 | this.remove(segmentInfo.cues[0].endTime,
|
293 | segmentInfo.cues[segmentInfo.cues.length - 1].endTime);
|
294 | }
|
295 |
|
296 | segmentInfo.cues.forEach((cue) => {
|
297 | this.subtitlesTrack_.addCue(cue);
|
298 | });
|
299 |
|
300 | this.handleUpdateEnd_();
|
301 | }
|
302 |
|
303 | |
304 |
|
305 |
|
306 |
|
307 |
|
308 |
|
309 |
|
310 | parseVTTCues_(segmentInfo) {
|
311 | let decoder;
|
312 | let decodeBytesToString = false;
|
313 |
|
314 | if (typeof window.TextDecoder === 'function') {
|
315 | decoder = new window.TextDecoder('utf8');
|
316 | } else {
|
317 | decoder = window.WebVTT.StringDecoder();
|
318 | decodeBytesToString = true;
|
319 | }
|
320 |
|
321 | const parser = new window.WebVTT.Parser(window,
|
322 | window.vttjs,
|
323 | decoder);
|
324 |
|
325 | segmentInfo.cues = [];
|
326 | segmentInfo.timestampmap = { MPEGTS: 0, LOCAL: 0 };
|
327 |
|
328 | parser.oncue = segmentInfo.cues.push.bind(segmentInfo.cues);
|
329 | parser.ontimestampmap = (map) => segmentInfo.timestampmap = map;
|
330 | parser.onparsingerror = (error) => {
|
331 | videojs.log.warn('Error encountered when parsing cues: ' + error.message);
|
332 | };
|
333 |
|
334 | if (segmentInfo.segment.map) {
|
335 | let mapData = segmentInfo.segment.map.bytes;
|
336 |
|
337 | if (decodeBytesToString) {
|
338 | mapData = uintToString(mapData);
|
339 | }
|
340 |
|
341 | parser.parse(mapData);
|
342 | }
|
343 |
|
344 | let segmentData = segmentInfo.bytes;
|
345 |
|
346 | if (decodeBytesToString) {
|
347 | segmentData = uintToString(segmentData);
|
348 | }
|
349 |
|
350 | parser.parse(segmentData);
|
351 | parser.flush();
|
352 | }
|
353 |
|
354 | |
355 |
|
356 |
|
357 |
|
358 |
|
359 |
|
360 |
|
361 |
|
362 |
|
363 |
|
364 |
|
365 |
|
366 |
|
367 | updateTimeMapping_(segmentInfo, mappingObj, playlist) {
|
368 | const segment = segmentInfo.segment;
|
369 |
|
370 | if (!mappingObj) {
|
371 |
|
372 |
|
373 |
|
374 | return;
|
375 | }
|
376 |
|
377 | if (!segmentInfo.cues.length) {
|
378 |
|
379 |
|
380 |
|
381 | segment.empty = true;
|
382 | return;
|
383 | }
|
384 |
|
385 | const timestampmap = segmentInfo.timestampmap;
|
386 | const diff = (timestampmap.MPEGTS / 90000) - timestampmap.LOCAL + mappingObj.mapping;
|
387 |
|
388 | segmentInfo.cues.forEach((cue) => {
|
389 |
|
390 | cue.startTime += diff;
|
391 | cue.endTime += diff;
|
392 | });
|
393 |
|
394 | if (!playlist.syncInfo) {
|
395 | const firstStart = segmentInfo.cues[0].startTime;
|
396 | const lastStart = segmentInfo.cues[segmentInfo.cues.length - 1].startTime;
|
397 |
|
398 | playlist.syncInfo = {
|
399 | mediaSequence: playlist.mediaSequence + segmentInfo.mediaIndex,
|
400 | time: Math.min(firstStart, lastStart - segment.duration)
|
401 | };
|
402 | }
|
403 | }
|
404 | }
|