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

Question

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:

$(document).on("change",".file_multi_video",function(evt){
  
  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;
      }
   }
  
});

user_11094356 · Answer

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


//div for video's preview

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]));
        $('.video-prev').show();
      }
      else
      {
        $('.upload-video-file').val('');
        $('.video-prev').hide();
        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];
}

user_6842921 · Answer

Lets make it easy

HTML:

JS:

function readVideo(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();   
        reader.onload = function(e) {
            $('.myvideo').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

user_11871867 · Answer

Here is an easy peasy solution

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

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

user_9087603 · Answer

This is example on VUE JS: preview PICTURE

Example SOURCE CODE - DRAG-DROP _part

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'
.split(',')
.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!

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

6 Answers