How can I set preview of video file, selecting from input type='file'
<p>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.</p>

<p>I am using basic HTML tag  to show. but it is not working.</p>

<p>Here is code:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><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;
      }
   }
  
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;video width="400" controls &gt;
              &lt;source src="mov_bbb.mp4" id="video_here"&gt;
            Your browser does not support HTML5 video.
          &lt;/video&gt;


 &lt;input type="file" name="file[]" class="file_multi_video" accept="video/*"&gt;</code></pre>
</div>
</div>
</p>