JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/localForage/localForage/4ce19202/dist/localforage.min.js"></script>
<pre id="log"></pre>
<input type="file" id="f" />
<br><br>
<button id="clear_btn" disabled="true">
clear database
</button>
<video controls muted autoplay></video>

JavaScript

f.onchange = store;

function store() {
  if (this.files[0].type.indexOf('video/') !== 0) {
    log.textContent = 'Not an video file...'
    return;
  }

  localforage.setItem('myfile', f.files[0]).then(_ => {
    log.textContent = 'page will soon reload, and load this file from storage';
    setTimeout(_ => location.reload(), 3000);
  })
}

async function getFile() {
  const blob = await localforage.getItem('myfile')
  if (!blob) {
    log.textContent = 'Please choose a video file to be stored.'
    return;
  }
  clear_btn.disabled = false;
  log.textContent = 'playing stored file: ' + blob.name;
  const vid = document.querySelector('video');
  vid.src = URL.createObjectURL( blob );
  return vid.play();
}
getFile().catch( err => {
  log.textContent = "We faced an issue:\n '" +
  	err.message + "'\n" +
    (err.message.includes( 'storage method') ?
      'If you are on Firefox, you may have to disable "Tracking Protection" for this site.' : '');
});

clear_btn.onclick = e => {
	localforage.removeItem('myfile');
}