上传前的香草javascript预览视频文件 - 没有JQUERY

Question

我一直在搜索代码，以便在上传之前在客户端预览视频。我见过很多Jquery。就个人而言，我发现外部库笨重.....但他们依靠香草javascript来运作（具有讽刺意味......）。 以前，我找到了一个描述此功能的页面。我再也找不到了....所以我正在接触SO社区。不要求申请或准备好的代码。寻找教程/博客的方向，我可以阅读，以使这成为可能。 TY提前

Answer 1

在change元素的<input type="file">事件处理程序中，您可以将File对象传递给URL.createObjectURL()并设置.src元素的<video>结果Blob URL。

document.querySelector("input[type=file]")
.onchange = function(event) {
  let file = event.target.files[0];
  let blobURL = URL.createObjectURL(file);
  document.querySelector("video").src = blobURL;
}