title: How can I set preview of video file, selecting from input type='file'
body: <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>