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

Answer 1

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];
}