1 |
|
2 |
|
3 | (function(window) {
|
4 | var representationsEl = document.getElementById('representations');
|
5 |
|
6 | representationsEl.addEventListener('change', function() {
|
7 | var selectedIndex = representationsEl.selectedIndex;
|
8 |
|
9 | if (!selectedIndex || selectedIndex < 1 || !window.vhs) {
|
10 | return;
|
11 | }
|
12 | var selectedOption = representationsEl.options[representationsEl.selectedIndex];
|
13 |
|
14 | if (!selectedOption) {
|
15 | return;
|
16 | }
|
17 |
|
18 | var id = selectedOption.value;
|
19 |
|
20 | window.vhs.representations().forEach(function(rep) {
|
21 | rep.playlist.disabled = rep.id !== id;
|
22 | });
|
23 |
|
24 | window.mpc.fastQualityChange_();
|
25 | });
|
26 | var isManifestObjectType = function(url) {
|
27 | return (/application\/vnd\.videojs\.vhs\+json/).test(url);
|
28 | };
|
29 | var hlsOptGroup = document.querySelector('[label="hls"]');
|
30 | var dashOptGroup = document.querySelector('[label="dash"]');
|
31 | var drmOptGroup = document.querySelector('[label="drm"]');
|
32 | var liveOptGroup = document.querySelector('[label="live"]');
|
33 | var llliveOptGroup = document.querySelector('[label="low latency live"]');
|
34 | var manifestOptGroup = document.querySelector('[label="json manifest object"]');
|
35 |
|
36 | var sourceList;
|
37 | var hlsDataManifest;
|
38 | var dashDataManifest;
|
39 |
|
40 | var addSourcesToDom = function() {
|
41 | if (!sourceList || !hlsDataManifest || !dashDataManifest) {
|
42 | return;
|
43 | }
|
44 |
|
45 | sourceList.forEach(function(source) {
|
46 | var option = document.createElement('option');
|
47 |
|
48 | option.innerText = source.name;
|
49 | option.value = source.uri;
|
50 |
|
51 | if (source.keySystems) {
|
52 | option.setAttribute('data-key-systems', JSON.stringify(source.keySystems, null, 2));
|
53 | }
|
54 |
|
55 | if (source.mimetype) {
|
56 | option.setAttribute('data-mimetype', source.mimetype);
|
57 | }
|
58 |
|
59 | if (source.features.indexOf('low-latency') !== -1) {
|
60 | llliveOptGroup.appendChild(option);
|
61 | } else if (source.features.indexOf('live') !== -1) {
|
62 | liveOptGroup.appendChild(option);
|
63 | } else if (source.keySystems) {
|
64 | drmOptGroup.appendChild(option);
|
65 | } else if (source.mimetype === 'application/x-mpegurl') {
|
66 | hlsOptGroup.appendChild(option);
|
67 | } else if (source.mimetype === 'application/dash+xml') {
|
68 | dashOptGroup.appendChild(option);
|
69 | }
|
70 | });
|
71 |
|
72 | var hlsOption = document.createElement('option');
|
73 | var dashOption = document.createElement('option');
|
74 |
|
75 | dashOption.innerText = 'Dash Manifest Object Test, does not survive page reload';
|
76 | dashOption.value = `data:application/vnd.videojs.vhs+json,${dashDataManifest}`;
|
77 | hlsOption.innerText = 'HLS Manifest Object Test, does not survive page reload';
|
78 | hlsOption.value = `data:application/vnd.videojs.vhs+json,${hlsDataManifest}`;
|
79 |
|
80 | manifestOptGroup.appendChild(hlsOption);
|
81 | manifestOptGroup.appendChild(dashOption);
|
82 | };
|
83 |
|
84 | var sourcesXhr = new window.XMLHttpRequest();
|
85 |
|
86 | sourcesXhr.addEventListener('load', function() {
|
87 | sourceList = JSON.parse(sourcesXhr.responseText);
|
88 | addSourcesToDom();
|
89 | });
|
90 | sourcesXhr.open('GET', './scripts/sources.json');
|
91 | sourcesXhr.send();
|
92 |
|
93 | var hlsManifestXhr = new window.XMLHttpRequest();
|
94 |
|
95 | hlsManifestXhr.addEventListener('load', function() {
|
96 | hlsDataManifest = hlsManifestXhr.responseText;
|
97 | addSourcesToDom();
|
98 |
|
99 | });
|
100 | hlsManifestXhr.open('GET', './scripts/hls-manifest-object.json');
|
101 | hlsManifestXhr.send();
|
102 |
|
103 | var dashManifestXhr = new window.XMLHttpRequest();
|
104 |
|
105 | dashManifestXhr.addEventListener('load', function() {
|
106 | dashDataManifest = dashManifestXhr.responseText;
|
107 | addSourcesToDom();
|
108 | });
|
109 | dashManifestXhr.open('GET', './scripts/dash-manifest-object.json');
|
110 | dashManifestXhr.send();
|
111 |
|
112 |
|
113 | var urlButton = document.getElementById('load-url');
|
114 | var sources = document.getElementById('load-source');
|
115 | var stateEls = {};
|
116 |
|
117 | var getInputValue = function(el) {
|
118 | if (el.type === 'url' || el.type === 'text' || el.nodeName.toLowerCase() === 'textarea') {
|
119 | if (isManifestObjectType(el.value)) {
|
120 | return '';
|
121 | }
|
122 | return encodeURIComponent(el.value);
|
123 | } else if (el.type === 'select-one') {
|
124 | return el.options[el.selectedIndex].value;
|
125 | } else if (el.type === 'checkbox') {
|
126 | return el.checked;
|
127 | }
|
128 |
|
129 | console.warn('unhandled input type ' + el.type);
|
130 | return '';
|
131 | };
|
132 |
|
133 | var setInputValue = function(el, value) {
|
134 | if (el.type === 'url' || el.type === 'text' || el.nodeName.toLowerCase() === 'textarea') {
|
135 | el.value = decodeURIComponent(value);
|
136 | } else if (el.type === 'select-one') {
|
137 | for (var i = 0; i < el.options.length; i++) {
|
138 | if (el.options[i].value === value) {
|
139 | el.options[i].selected = true;
|
140 | }
|
141 | }
|
142 | } else {
|
143 |
|
144 | el.checked = JSON.parse(value);
|
145 | }
|
146 |
|
147 | };
|
148 |
|
149 | var newEvent = function(name) {
|
150 | var event;
|
151 |
|
152 | if (typeof window.Event === 'function') {
|
153 | event = new window.Event(name);
|
154 | } else {
|
155 | event = document.createEvent('Event');
|
156 | event.initEvent(name, true, true);
|
157 | }
|
158 |
|
159 | return event;
|
160 | };
|
161 |
|
162 |
|
163 | var getFileExtension = function(path) {
|
164 | var splitPathRe;
|
165 | var pathParts;
|
166 |
|
167 | if (typeof path === 'string') {
|
168 | splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]*?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/i;
|
169 | pathParts = splitPathRe.exec(path);
|
170 |
|
171 | if (pathParts) {
|
172 | return pathParts.pop().toLowerCase();
|
173 | }
|
174 | }
|
175 |
|
176 | return '';
|
177 | };
|
178 |
|
179 | var saveState = function() {
|
180 | var query = '';
|
181 |
|
182 | if (!window.history.replaceState) {
|
183 | return;
|
184 | }
|
185 |
|
186 | Object.keys(stateEls).forEach(function(elName) {
|
187 | var symbol = query.length ? '&' : '?';
|
188 |
|
189 | query += symbol + elName + '=' + getInputValue(stateEls[elName]);
|
190 | });
|
191 |
|
192 | window.history.replaceState({}, 'vhs demo', query);
|
193 | };
|
194 |
|
195 | window.URLSearchParams = window.URLSearchParams || function(locationSearch) {
|
196 | this.get = function(name) {
|
197 | var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(locationSearch);
|
198 |
|
199 | return results ? decodeURIComponent(results[1]) : null;
|
200 | };
|
201 | };
|
202 |
|
203 |
|
204 | var loadState = function() {
|
205 | var params = new window.URLSearchParams(window.location.search);
|
206 |
|
207 | return Object.keys(stateEls).reduce(function(acc, elName) {
|
208 | acc[elName] = typeof params.get(elName) !== 'object' ? params.get(elName) : getInputValue(stateEls[elName]);
|
209 | return acc;
|
210 | }, {});
|
211 | };
|
212 |
|
213 |
|
214 | var reloadScripts = function(urls, cb) {
|
215 | var el = document.getElementById('reload-scripts');
|
216 |
|
217 | if (!el) {
|
218 | el = document.createElement('div');
|
219 | el.id = 'reload-scripts';
|
220 | document.body.appendChild(el);
|
221 | }
|
222 |
|
223 | while (el.firstChild) {
|
224 | el.removeChild(el.firstChild);
|
225 | }
|
226 |
|
227 | var loaded = [];
|
228 |
|
229 | var checkDone = function() {
|
230 | if (loaded.length === urls.length) {
|
231 | cb();
|
232 | }
|
233 | };
|
234 |
|
235 | urls.forEach(function(url) {
|
236 | var script = document.createElement('script');
|
237 |
|
238 |
|
239 | script.defer = true;
|
240 |
|
241 |
|
242 |
|
243 | script.async = false;
|
244 | script.src = url;
|
245 | script.onload = function() {
|
246 | loaded.push(url);
|
247 | checkDone();
|
248 | };
|
249 | el.appendChild(script);
|
250 | });
|
251 | };
|
252 |
|
253 | var regenerateRepresentations = function() {
|
254 | while (representationsEl.firstChild) {
|
255 | representationsEl.removeChild(representationsEl.firstChild);
|
256 | }
|
257 |
|
258 | var selectedIndex;
|
259 |
|
260 | window.vhs.representations().forEach(function(rep, i) {
|
261 | var option = document.createElement('option');
|
262 |
|
263 | option.value = rep.id;
|
264 | option.innerText = JSON.stringify({
|
265 | id: rep.id,
|
266 | videoCodec: rep.codecs.video,
|
267 | audioCodec: rep.codecs.audio,
|
268 | bandwidth: rep.bandwidth,
|
269 | heigth: rep.heigth,
|
270 | width: rep.width
|
271 | });
|
272 |
|
273 | if (window.mpc.media().id === rep.id) {
|
274 | selectedIndex = i;
|
275 | }
|
276 |
|
277 | representationsEl.appendChild(option);
|
278 | });
|
279 |
|
280 | representationsEl.selectedIndex = selectedIndex;
|
281 | };
|
282 |
|
283 | function getBuffered(buffered) {
|
284 | var bufferedText = '';
|
285 |
|
286 | if (!buffered) {
|
287 | return bufferedText;
|
288 | }
|
289 |
|
290 | if (buffered.length) {
|
291 | bufferedText += buffered.start(0) + ' - ' + buffered.end(0);
|
292 | }
|
293 | for (var i = 1; i < buffered.length; i++) {
|
294 | bufferedText += ', ' + buffered.start(i) + ' - ' + buffered.end(i);
|
295 | }
|
296 | return bufferedText;
|
297 | }
|
298 |
|
299 | var setupSegmentMetadata = function(player) {
|
300 |
|
301 | var segmentMetadata = document.querySelector('#segment-metadata');
|
302 |
|
303 | player.one('loadedmetadata', function() {
|
304 | var tracks = player.textTracks();
|
305 | var segmentMetadataTrack;
|
306 |
|
307 | for (var i = 0; i < tracks.length; i++) {
|
308 | if (tracks[i].label === 'segment-metadata') {
|
309 | segmentMetadataTrack = tracks[i];
|
310 | }
|
311 | }
|
312 |
|
313 | while (segmentMetadata.children.length) {
|
314 | segmentMetadata.removeChild(segmentMetadata.firstChild);
|
315 | }
|
316 |
|
317 | if (segmentMetadataTrack) {
|
318 | segmentMetadataTrack.addEventListener('cuechange', function() {
|
319 | var cues = segmentMetadataTrack.activeCues || [];
|
320 |
|
321 | while (segmentMetadata.children.length) {
|
322 | segmentMetadata.removeChild(segmentMetadata.firstChild);
|
323 | }
|
324 |
|
325 | for (var j = 0; j < cues.length; j++) {
|
326 | var text = JSON.stringify(JSON.parse(cues[j].text), null, 2);
|
327 | var li = document.createElement('li');
|
328 | var pre = document.createElement('pre');
|
329 |
|
330 | pre.classList.add('border', 'rounded', 'p-2');
|
331 | pre.textContent = text;
|
332 | li.appendChild(pre);
|
333 | segmentMetadata.appendChild(li);
|
334 | }
|
335 | });
|
336 | }
|
337 | });
|
338 | };
|
339 |
|
340 | var setupPlayerStats = function(player) {
|
341 | player.on('dispose', () => {
|
342 | if (window.statsTimer) {
|
343 | window.clearInterval(window.statsTimer);
|
344 | window.statsTimer = null;
|
345 | }
|
346 | });
|
347 | var currentTimeStat = document.querySelector('.current-time-stat');
|
348 | var bufferedStat = document.querySelector('.buffered-stat');
|
349 | var videoBufferedStat = document.querySelector('.video-buffered-stat');
|
350 | var audioBufferedStat = document.querySelector('.audio-buffered-stat');
|
351 | var seekableStartStat = document.querySelector('.seekable-start-stat');
|
352 | var seekableEndStat = document.querySelector('.seekable-end-stat');
|
353 | var videoBitrateState = document.querySelector('.video-bitrate-stat');
|
354 | var measuredBitrateStat = document.querySelector('.measured-bitrate-stat');
|
355 | var videoTimestampOffset = document.querySelector('.video-timestampoffset');
|
356 | var audioTimestampOffset = document.querySelector('.audio-timestampoffset');
|
357 |
|
358 | player.on('timeupdate', function() {
|
359 | currentTimeStat.textContent = player.currentTime().toFixed(1);
|
360 | });
|
361 |
|
362 | window.statsTimer = window.setInterval(function() {
|
363 | var oldStart;
|
364 | var oldEnd;
|
365 | var seekable = player.seekable();
|
366 |
|
367 | if (seekable && seekable.length) {
|
368 |
|
369 | oldStart = seekableStartStat.textContent;
|
370 | if (seekable.start(0).toFixed(1) !== oldStart) {
|
371 | seekableStartStat.textContent = seekable.start(0).toFixed(1);
|
372 | }
|
373 | oldEnd = seekableEndStat.textContent;
|
374 | if (seekable.end(0).toFixed(1) !== oldEnd) {
|
375 | seekableEndStat.textContent = seekable.end(0).toFixed(1);
|
376 | }
|
377 | }
|
378 |
|
379 |
|
380 | bufferedStat.textContent = getBuffered(player.buffered());
|
381 |
|
382 |
|
383 | if (!player.tech(true).vhs) {
|
384 | videoBufferedStat.textContent = '';
|
385 | audioBufferedStat.textContent = '';
|
386 | videoBitrateState.textContent = '';
|
387 | measuredBitrateStat.textContent = '';
|
388 | videoTimestampOffset.textContent = '';
|
389 | audioTimestampOffset.textContent = '';
|
390 | return;
|
391 | }
|
392 |
|
393 | videoBufferedStat.textContent = getBuffered(player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer &&
|
394 | player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer.buffered);
|
395 |
|
396 |
|
397 | var audioBuffer = getBuffered(player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer &&
|
398 | player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer.buffered);
|
399 |
|
400 |
|
401 | if (!audioBuffer) {
|
402 | audioBuffer = getBuffered(player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer &&
|
403 | player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer.buffered);
|
404 | }
|
405 | audioBufferedStat.textContent = audioBuffer;
|
406 |
|
407 | if (player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer) {
|
408 | audioTimestampOffset.textContent = player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer.timestampOffset;
|
409 |
|
410 | } else if (player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer) {
|
411 | audioTimestampOffset.textContent = player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer.timestampOffset;
|
412 | }
|
413 |
|
414 | if (player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer) {
|
415 | videoTimestampOffset.textContent = player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer.timestampOffset;
|
416 | }
|
417 |
|
418 |
|
419 | var playlist = player.tech_.vhs.playlists.media();
|
420 |
|
421 | if (playlist && playlist.attributes && playlist.attributes.BANDWIDTH) {
|
422 | videoBitrateState.textContent = (playlist.attributes.BANDWIDTH / 1024).toLocaleString(undefined, {
|
423 | maximumFractionDigits: 1
|
424 | }) + ' kbps';
|
425 | }
|
426 | if (player.tech_.vhs.bandwidth) {
|
427 | measuredBitrateStat.textContent = (player.tech_.vhs.bandwidth / 1024).toLocaleString(undefined, {
|
428 | maximumFractionDigits: 1
|
429 | }) + ' kbps';
|
430 | }
|
431 |
|
432 | }, 100);
|
433 | };
|
434 |
|
435 | [
|
436 | 'debug',
|
437 | 'autoplay',
|
438 | 'muted',
|
439 | 'fluid',
|
440 | 'minified',
|
441 | 'sync-workers',
|
442 | 'liveui',
|
443 | 'llhls',
|
444 | 'url',
|
445 | 'type',
|
446 | 'keysystems',
|
447 | 'buffer-water',
|
448 | 'exact-manifest-timings',
|
449 | 'pixel-diff-selector',
|
450 | 'network-info',
|
451 | 'dts-offset',
|
452 | 'override-native',
|
453 | 'preload',
|
454 | 'mirror-source'
|
455 | ].forEach(function(name) {
|
456 | stateEls[name] = document.getElementById(name);
|
457 | });
|
458 |
|
459 | window.startDemo = function(cb) {
|
460 | var state = loadState();
|
461 |
|
462 | Object.keys(state).forEach(function(elName) {
|
463 | setInputValue(stateEls[elName], state[elName]);
|
464 | });
|
465 |
|
466 | Array.prototype.forEach.call(sources.options, function(s, i) {
|
467 | if (s.value === state.url) {
|
468 | sources.selectedIndex = i;
|
469 | }
|
470 | });
|
471 |
|
472 | stateEls.fluid.addEventListener('change', function(event) {
|
473 | saveState();
|
474 | if (event.target.checked) {
|
475 | window['player-fixture'].style.aspectRatio = '16/9';
|
476 | window['player-fixture'].style.minHeight = 'initial';
|
477 | } else {
|
478 | window['player-fixture'].style.aspectRatio = '';
|
479 | window['player-fixture'].style.minHeight = '250px';
|
480 | }
|
481 | window.player.fluid(event.target.checked);
|
482 | });
|
483 |
|
484 | stateEls.muted.addEventListener('change', function(event) {
|
485 | saveState();
|
486 | window.player.muted(event.target.checked);
|
487 | });
|
488 |
|
489 | stateEls.autoplay.addEventListener('change', function(event) {
|
490 | saveState();
|
491 | window.player.autoplay(event.target.checked);
|
492 | });
|
493 |
|
494 |
|
495 | [
|
496 | 'mirror-source',
|
497 | 'sync-workers',
|
498 | 'preload',
|
499 | 'llhls',
|
500 | 'buffer-water',
|
501 | 'override-native',
|
502 | 'liveui',
|
503 | 'pixel-diff-selector',
|
504 | 'network-info',
|
505 | 'dts-offset',
|
506 | 'exact-manifest-timings'
|
507 | ].forEach(function(name) {
|
508 | stateEls[name].addEventListener('change', function(event) {
|
509 | saveState();
|
510 |
|
511 | stateEls.minified.dispatchEvent(newEvent('change'));
|
512 | });
|
513 | });
|
514 |
|
515 | stateEls.debug.addEventListener('change', function(event) {
|
516 | saveState();
|
517 | window.videojs.log.level(event.target.checked ? 'debug' : 'info');
|
518 | });
|
519 |
|
520 | stateEls.minified.addEventListener('change', function(event) {
|
521 | var urls = [
|
522 | 'node_modules/video.js/dist/alt/video.core',
|
523 | 'node_modules/videojs-contrib-eme/dist/videojs-contrib-eme',
|
524 | 'node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels',
|
525 | 'node_modules/videojs-http-source-selector/dist/videojs-http-source-selector'
|
526 | ].map(function(url) {
|
527 | return url + (event.target.checked ? '.min' : '') + '.js';
|
528 | });
|
529 |
|
530 | if (stateEls['sync-workers'].checked) {
|
531 | urls.push('dist/videojs-http-streaming-sync-workers.js');
|
532 | } else {
|
533 | urls.push('dist/videojs-http-streaming' + (event.target.checked ? '.min' : '') + '.js');
|
534 | }
|
535 |
|
536 | saveState();
|
537 |
|
538 | if (window.player) {
|
539 | window.player.dispose();
|
540 | delete window.player;
|
541 | }
|
542 | if (window.videojs) {
|
543 | delete window.videojs;
|
544 | }
|
545 |
|
546 | reloadScripts(urls, function() {
|
547 | var player;
|
548 | var fixture = document.getElementById('player-fixture');
|
549 | var videoEl = document.createElement('video-js');
|
550 |
|
551 | videoEl.setAttribute('controls', '');
|
552 | videoEl.setAttribute('preload', stateEls.preload.options[stateEls.preload.selectedIndex].value || 'auto');
|
553 | videoEl.className = 'vjs-default-skin';
|
554 | fixture.appendChild(videoEl);
|
555 |
|
556 | var mirrorSource = getInputValue(stateEls['mirror-source']);
|
557 |
|
558 | player = window.player = window.videojs(videoEl, {
|
559 | plugins: {
|
560 | httpSourceSelector: {
|
561 | default: 'auto'
|
562 | }
|
563 | },
|
564 | liveui: stateEls.liveui.checked,
|
565 | enableSourceset: mirrorSource,
|
566 | html5: {
|
567 | vhs: {
|
568 | overrideNative: getInputValue(stateEls['override-native']),
|
569 | experimentalBufferBasedABR: getInputValue(stateEls['buffer-water']),
|
570 | experimentalLLHLS: getInputValue(stateEls.llhls),
|
571 | experimentalExactManifestTimings: getInputValue(stateEls['exact-manifest-timings']),
|
572 | experimentalLeastPixelDiffSelector: getInputValue(stateEls['pixel-diff-selector']),
|
573 | useNetworkInformationApi: getInputValue(stateEls['network-info']),
|
574 | useDtsForTimestampOffset: getInputValue(stateEls['dts-offset'])
|
575 | }
|
576 | }
|
577 | });
|
578 |
|
579 | setupPlayerStats(player);
|
580 | setupSegmentMetadata(player);
|
581 |
|
582 |
|
583 | player.on('volumechange', function() {
|
584 | if (stateEls.muted.checked !== player.muted()) {
|
585 | stateEls.muted.checked = player.muted();
|
586 | saveState();
|
587 | }
|
588 | });
|
589 |
|
590 | player.on('sourceset', function() {
|
591 | var source = player.currentSource();
|
592 |
|
593 | if (source.keySystems) {
|
594 | var copy = JSON.parse(JSON.stringify(source.keySystems));
|
595 |
|
596 |
|
597 |
|
598 | Object.keys(copy).forEach(function(key) {
|
599 | if (copy[key].hasOwnProperty('pssh')) {
|
600 | delete copy[key].pssh;
|
601 | }
|
602 | });
|
603 |
|
604 | stateEls.keysystems.value = JSON.stringify(copy, null, 2);
|
605 | }
|
606 |
|
607 | if (source.src) {
|
608 | stateEls.url.value = encodeURI(source.src);
|
609 | }
|
610 |
|
611 | if (source.type) {
|
612 | stateEls.type.value = source.type;
|
613 | }
|
614 |
|
615 | saveState();
|
616 | });
|
617 |
|
618 | player.width(640);
|
619 | player.height(264);
|
620 |
|
621 |
|
622 | player.eme();
|
623 |
|
624 | stateEls.debug.dispatchEvent(newEvent('change'));
|
625 | stateEls.muted.dispatchEvent(newEvent('change'));
|
626 | stateEls.fluid.dispatchEvent(newEvent('change'));
|
627 | stateEls.autoplay.dispatchEvent(newEvent('change'));
|
628 |
|
629 |
|
630 | if (stateEls.url.value) {
|
631 | urlButton.dispatchEvent(newEvent('click'));
|
632 | } else {
|
633 | sources.dispatchEvent(newEvent('change'));
|
634 | }
|
635 | player.on('loadedmetadata', function() {
|
636 | if (player.tech_.vhs) {
|
637 | window.vhs = player.tech_.vhs;
|
638 | window.mpc = player.tech_.vhs.masterPlaylistController_;
|
639 | window.mpc.masterPlaylistLoader_.on('mediachange', regenerateRepresentations);
|
640 | regenerateRepresentations();
|
641 |
|
642 | } else {
|
643 | window.vhs = null;
|
644 | window.mpc = null;
|
645 | }
|
646 | });
|
647 | cb(player);
|
648 | });
|
649 | });
|
650 |
|
651 | var urlButtonClick = function(event) {
|
652 | var ext;
|
653 | var type = stateEls.type.value;
|
654 |
|
655 |
|
656 | if (type === 'application/vnd.videojs.vhs+json') {
|
657 | type = '';
|
658 | }
|
659 |
|
660 | if (isManifestObjectType(stateEls.url.value)) {
|
661 | type = 'application/vnd.videojs.vhs+json';
|
662 | }
|
663 |
|
664 | if (!type.trim()) {
|
665 | ext = getFileExtension(stateEls.url.value);
|
666 |
|
667 | if (ext === 'mpd') {
|
668 | type = 'application/dash+xml';
|
669 | } else if (ext === 'm3u8') {
|
670 | type = 'application/x-mpegURL';
|
671 | }
|
672 | }
|
673 |
|
674 | saveState();
|
675 |
|
676 | var source = {
|
677 | src: stateEls.url.value,
|
678 | type: type
|
679 | };
|
680 |
|
681 | if (stateEls.keysystems.value) {
|
682 | source.keySystems = JSON.parse(stateEls.keysystems.value);
|
683 | }
|
684 |
|
685 | sources.selectedIndex = -1;
|
686 |
|
687 | Array.prototype.forEach.call(sources.options, function(s, i) {
|
688 | if (s.value === stateEls.url.value) {
|
689 | sources.selectedIndex = i;
|
690 | }
|
691 | });
|
692 |
|
693 | window.player.src(source);
|
694 | };
|
695 |
|
696 | urlButton.addEventListener('click', urlButtonClick);
|
697 | urlButton.addEventListener('tap', urlButtonClick);
|
698 |
|
699 | sources.addEventListener('change', function(event) {
|
700 | var selectedOption = sources.options[sources.selectedIndex];
|
701 |
|
702 | if (!selectedOption) {
|
703 | return;
|
704 | }
|
705 | var src = selectedOption.value;
|
706 |
|
707 | stateEls.url.value = src;
|
708 | stateEls.type.value = selectedOption.getAttribute('data-mimetype');
|
709 | stateEls.keysystems.value = selectedOption.getAttribute('data-key-systems');
|
710 |
|
711 | urlButton.dispatchEvent(newEvent('click'));
|
712 | });
|
713 |
|
714 | stateEls.url.addEventListener('keyup', function(event) {
|
715 | if (event.key === 'Enter') {
|
716 | urlButton.click();
|
717 | }
|
718 | });
|
719 | stateEls.url.addEventListener('input', function(event) {
|
720 | if (stateEls.type.value.length) {
|
721 | stateEls.type.value = '';
|
722 | }
|
723 | });
|
724 | stateEls.type.addEventListener('keyup', function(event) {
|
725 | if (event.key === 'Enter') {
|
726 | urlButton.click();
|
727 | }
|
728 | });
|
729 |
|
730 |
|
731 | stateEls.minified.dispatchEvent(newEvent('change'));
|
732 | };
|
733 | }(window));
|