How can I set preview of video file, selecting from input type='file'

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

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