Preview videos before upload: Here in this article we will learn how to preview videos at the client-side before uploading them on the server via javascript. In our previous article, we have also learned how to preview images before upload.

Preview videos before upload help to reduce our server load. Also, this allows us to upload valid videos by marking them as valid or final upload.

Steps to preview videos before upload

1. Html markup: Add input file type and Video tag
2. JS code: Use URL.createObjectURL to preview video.

#Html markup: Add input file type, Video tag

Here we add an input file type and Video HTML tag on our webpage. Our HTML markup looks like as shown below

<input type='file'  id='videoUpload' />

<video width="320" height="240" controls>
  Your browser does not support the video tag.
</video>

#Javascript: Usage of URL.createObjectURL to preview video.

Here first we select our input file type by its id .i.e document.getElementById. Then will attach the onchange event to it. At the onchange event, we set video tag src as blobURL, which is URL.createObjectURL of the selected video file.

The final javascript code to preview the video looks like as shown below.

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

View Demo

Finally we able to preview the selected videos before uploading them to the server.

Other Reference:

• URL.CreateObjectURL