How can I set preview of video file, selecting from input type='file'
@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.
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 >
If you are facing this issue. Then you can use the below method to resolve the above issue.
Here is the html code:
//input tag to upload file<input class="upload-video-file" type='file' name="file"/>//div for video's preview <div style="display: none;" class='video-prev' class="pull-right"> <video height="200" width="300" class="video-preview" controls="controls"/> </div>Here is the JS function below:
$(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];}