How can I set preview of video file, selecting from input type='file'

JavascriptJqueryHtmlVideoHtml5 Video

Javascript Problem Overview

In one of my module, I need to browse video from input[type='file'], after that I need to show selected video before starting upload.

I am using basic HTML tag to show. but it is not working.

Here is code:

  var this_ = $(this).parent();
  var dataid = $(this).attr('data-id');
  var files = !!this.files ? this.files : [];
  if (!files.length || !window.FileReader) return; 
  if (/^video/.test( files[0].type)){ // only video file
    var reader = new FileReader(); // instance of the FileReader
    reader.readAsDataURL(files[0]); // read the local file
    reader.onloadend = function(){ // set video data as background of div
          var video = document.getElementById('video_here');
          video.src = this.result;

<script src=""></script>

<video width="400" controls >
              <source src="mov_bbb.mp4" id="video_here">
            Your browser does not support HTML5 video.

 <input type="file" name="file[]" class="file_multi_video" accept="video/*">

Javascript Solutions

Solution 1 - Javascript

@FabianQuiroga is right that you should better use createObjectURL than a FileReader in this case, but your problem has more to do with the fact that you set the src of a <source> element, so you need to call videoElement.load().

$(document).on("change", ".file_multi_video", function(evt) {
  var $source = $('#video_here');
  $source[0].src = URL.createObjectURL(this.files[0]);

<script src=""></script>

<video width="400" controls>
  <source src="mov_bbb.mp4" id="video_here">
    Your browser does not support HTML5 video.

<input type="file" name="file[]" class="file_multi_video" accept="video/*">

Ps: don't forget to call URL.revokeObjectURL($source[0].src) when you don't need it anymore.

Solution 2 - Javascript

Do not forget that it uses jquery library


$ ("#video_p").change(function () {
   var fileInput = document.getElementById('video_p');
   var fileUrl = window.URL.createObjectURL(fileInput.files[0]);
   $(".video").attr("src", fileUrl);


< video controls class="video" >
< /video >

Solution 3 - Javascript

If you are facing this issue. Then you can use the below method to resolve the above issue.

Here is the html code:

//input tag to upload file
<input class="upload-video-file" type='file' name="file"/>

//div for video's preview
 <div style="display: none;" class='video-prev' class="pull-right">
       <video height="200" width="300" class="video-preview" controls="controls"/>

Here is the JS function below:

$(function() {
    $('.upload-video-file').on('change', function(){
      if (isVideo($(this).val())){
        $('.video-preview').attr('src', URL.createObjectURL(this.files[0]));
        alert("Only video files are allowed to upload.")

// If user tries to upload videos other than these extension , it will throw error.
function isVideo(filename) {
    var ext = getExtension(filename);
    switch (ext.toLowerCase()) {
    case 'm4v':
    case 'avi':
    case 'mp4':
    case 'mov':
    case 'mpg':
    case 'mpeg':
        // etc
        return true;
    return false;

function getExtension(filename) {
    var parts = filename.split('.');
    return parts[parts.length - 1];

Solution 4 - Javascript

Lets make it easy


<video width="100%" controls class="myvideo" style="height:100%">
<source src="mov_bbb.mp4" id="video_here">
Your browser does not support HTML5 video.


function readVideo(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();   
        reader.onload = function(e) {


Solution 5 - Javascript

Here is an easy peasy solution

document.getElementById("videoUpload").onchange = function(event) {
  let file =[0];
  let blobURL = URL.createObjectURL(file);
  document.querySelector("video").style.display = 'block';
  document.querySelector("video").src = blobURL;

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

<video width="320" height="240" style="display:none" controls autoplay>
  Your browser does not support the video tag.

the solution is using vanilla js so you don't need JQuery with it, tested and works on chrome, Goodluck

Solution 6 - Javascript

This is example on VUE JS: preview PICTURE


Example with RENDERing & createObjectURL() using VIDEO.js

p.s. i just want to improve "Pragya Sriharsh" solution:

const = isVideo = filename =>'m4v,avi,mpg,mov,mpg,mpeg'
.includes( getExtension(filename).toLowerCase() )

And .. please don't use JQuery, it's now 2k19:-);

-> So:

const getExtension = filename => {
    const parts = filename.split('.');
    return parts[parts.length - 1];

... And let the rest of the work will be done by Webpack 4!


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRonak PatelView Question on Stackoverflow
Solution 1 - JavascriptKaiidoView Answer on Stackoverflow
Solution 2 - JavascriptFabian QuirogaView Answer on Stackoverflow
Solution 3 - JavascriptPragya SriharshView Answer on Stackoverflow
Solution 4 - JavascriptUsama ShahidView Answer on Stackoverflow
Solution 5 - JavascriptAbdulbasitView Answer on Stackoverflow
Solution 6 - Javascriptkostia7alaniaView Answer on Stackoverflow