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
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
Share Improve this question asked Aug 13, 2017 at 15:23 James WalkerJames Walker 4115 silver badges21 bronze badges1 Answer
Reset to default 22Within 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;
}