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

Question

I have been searching for code to preview a video in client side before upload. I have seen MANY with Jquery. Personally i find external libraries bulky..... yet they rely on vanilla javascript to function (ironic..). Previously, i found a page that describes this functionality. I can no longer find it.... so i am reaching out to the SO community. NOT asking for an application, or ready made code. looking for direction to tutorials/blogs that i can read to make this possible. TY in advance

Answer 1

Within change event handler of <input type="file"> element you can pass the File object to URL.createObjectURL() and set the .src of the <video> element to the resulting 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;
}