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

Lets make it easy

HTML:

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

---

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

---

Answer 2

Do not forget that it uses jquery library

Javascript

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

Html

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

Answer 3

@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]);
  $source.parent()[0].load();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video width="400" controls>
  <source src="mov_bbb.mp4" id="video_here">
    Your browser does not support HTML5 video.
</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.

Answer 4

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"/>
 </div>

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

Answer 5

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!