Loading a Video as an Object URL

const fileInput = document.querySelector('#file-upload');
const content = document.querySelector('#file-content');

fileInput.addEventListener('change', event => {
  const [file] = fileInput.files;

  // File extends from Blob, which can be passed to
  // createObjectURL.
  const objectUrl = URL.createObjectURL(file);

  // The <video> element can take the object URL to load the video
  content.src = objectUrl;
});

<label for="file-upload" class="form-label">Video</label>
<input
  id="file-upload"
  type="file"
  accept="video/*"
  class="form-control"
>

<div class="my-4">
  <label class="form-label">Video Content</label>
  <div class="card">
    <div class="card-body">
      <video class="w-100" id="file-content" controls></video>
    </div>
  </div>
</div>