html video preload

1const video = document.querySelector('video');
2
3const mediaSource = new MediaSource();
4video.src = URL.createObjectURL(mediaSource);
5  
6mediaSource.addEventListener('sourceopen', function() {
7  URL.revokeObjectURL(video.src);
8
9  mediaSource.addSourceBuffer('video/webm; codecs="vp9"');
10
11  log('Fetching video init segment...');
12  fetchAndAppendSegment('bytes=0-299');
13}, { once: true });
14
15function onSetInfiniteDurationButtonClick() {
16  log('User clicked "mediaSource.duration = +Infinity" button');
17  // Makes video behave like a live stream.
18  mediaSource.duration = +Infinity;
19  logMediaInfo();
20}
21
22function onFetchAndAppend3To6MediaButtonClick() {
23  log('Fetching video segment that starts at 3 seconds...');
24  fetchAndAppendSegment('bytes=567140-1196488');
25}
26
27function onSetLiveSeekableRangeButtonClick(event) {
28  const re = /mediaSource\.setLiveSeekableRange\((\d+), (\d+)\)/;
29  const start = Number(re.exec(event.target.textContent)[1]);
30  const end = Number(re.exec(event.target.textContent)[2]);
31  log(`User clicked "mediaSource.setLiveSeekableRange(${start}, ${end})" button`);
32  mediaSource.setLiveSeekableRange(start, end);
33  logMediaInfo();
34}
35
36function onClearLiveSeekableRangeButtonClick() {
37  log('User clicked "mediaSource.clearLiveSeekableRange()" button');
38  mediaSource.clearLiveSeekableRange();
39  logMediaInfo();
40}
41
42function onRemoveMediaSegmentButtonClick() {
43  const sourceBuffer = mediaSource.sourceBuffers[0];
44
45  log('User clicked "sourceBuffer.remove(3, 6)" button');
46  sourceBuffer.remove(3 /* start */, 6 /* end*/);
47  sourceBuffer.addEventListener('updateend', function() {
48    logMediaInfo();
49  }, { once: true });
50}
51
52function onSetFiniteDurationButtonClick() {
53  log('User clicked "mediaSource.duration = 6" button');
54  mediaSource.duration = 6;
55  logMediaInfo();
56}
57
58function onEndOfStreamButtonClick() {
59  log('User clicked "mediaSource.endOfStream()" button');
60  mediaSource.endOfStream();
61  mediaSource.addEventListener('sourceended', function() {
62    logMediaInfo();
63  }, { once: true });
64}
65
66/* Utils */
67
68function fetchAndAppendSegment(range) {
69  const videoUrl = 'https://storage.googleapis.com/media-session/sample.webm';
70  const sourceBuffer = mediaSource.sourceBuffers[0];
71
72  fetch(videoUrl, { headers: { range } })
73  .then(response => response.arrayBuffer())
74  .then(data => {
75    sourceBuffer.appendBuffer(data);
76    sourceBuffer.addEventListener('updateend', function() {
77      logMediaInfo();
78    }, { once: true });
79  });
80}
81
82function logMediaInfo() {
83  log(`> Seekable time ranges: ${timeRangesToString(video.seekable)}`);
84  log(`> Buffered time ranges: ${timeRangesToString(video.buffered)}`);
85  log(`> MediaSource duration: ${mediaSource.duration}`);
86  log('');
87}
88
89function timeRangesToString(ranges) {
90  var s = "{";
91  for (var i = 0; i < ranges.length; ++i) {
92    s += " [" + ranges.start(i).toFixed(3) + ", " + ranges.end(i).toFixed(3) + ")";
93  }
94  return s + " }";
95}