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

<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 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.