JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<div>
  <input type="file" id="file">
</div>
<video id="video" width="400"></video>

JavaScript

const video = document.querySelector('#video');

document.querySelector('#file').addEventListener('change', (e) => {
	const [file] = e.target.files;
  const middle = file.size / 2;
  const parts = [file.slice(0, middle), file.slice(middle)];
  
  // представим, что загрузилась только половина видео
  // формируем URL из этой половины, начинаем проигрывание
  video.src = URL.createObjectURL(parts[0]);
  video.play();
  
  // представим, что через 3 секунды догрузилась оставшаяся часть видео
  setTimeout(() => {
  	// формируем URL для всего видео, продолжаем проигрывание
    const { currentTime } = video;
    video.src = URL.createObjectURL(new Blob(parts));
    video.currentTime = currentTime;
    video.play();
  }, 3000);
});