How to set up video preview by selecting input type = 'file'

Question

In one of my modules I need to watch the video with input [type = 'file'], after which I need to show the selected video before downloading.

I am using a basic HTML tag for display. but it does not work.

Here is the 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; } } }); 

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

Answer 1

@FabianQuiroga is right that you are better off using createObjectURL than a FileReader in this case, but your problem is more that you are setting the src of the <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 no longer need it.

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

 $(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/*"> 

I am new to angularjs, so I want to know how to do this with angularjs

Answer 4

If you run into this problem. Then you can use the method below to solve the above problem.

Here is the HTML code:

 //input tag to upload file <input class="upload-video-file" type='file' name="file"/> //div for video preview <div style="display: none;" class='video-prev' class="pull-right"> <video height="200" width="300" class="video-preview" controls="controls"/> </div> 

The following is the JS function:

 $(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 an example on VUE JS: image preview

SOURCE CODE Example - DRAG-DROP _part

Example with RENDERing & createObjectURL () using VIDEO.js

PS I just want to improve the Pragya Sriharsh solution :

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

And .. please do not use jQuery, now 2k19 :-);

→ So:

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

... And let Webpack 4 do the rest!

Answer 6

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

---