如何在上传前预览视频 - vanilla JavaScript 没有第三方库

Question

如何在使用 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>