How to preview a video before upload - vanilla JavaScript no third-party libraries

Question

How can I display video before uploading to a server with vanilla JavaScript?

<input type="file" onchange="loadFile(event)">
<video width="320" height="240" controls>
  <source id="output" type="video/mp4">
  Your browser does not support the video tag.
</video>

JavaScript:

function loadFile(){
    // Display chosen file in id "output"
}

Answer 1

const load = (e) => {
  let url = URL.createObjectURL(e.files[0])
  let video = document.querySelector("#id");
  video.setAttribute("src", url)
  video.play();
}

<input type="file" onChange="load(this)" />
<video width="320" height="240" controls id="id">

</video>