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

by

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

More Related Contents:

  1. HTML5 callbacks?
  2. Play HTML5 Video when scrolled to
  3. Retrieving HTML5 video duration separately from the file
  4. Can I use javascript to dynamically change a video’s source?
  5. Programmatically play video with sound on Safari and Mobile Chrome
  6. Detect if HTML5 Video element is playing [duplicate]
  7. How to mute an html5 video player using jQuery
  8. play pause html5 video javascript
  9. How to change the playing speed of videos in HTML5?
  10. HTML5 and Javascript to play videos only when visible
  11. HTML5 Video: Streaming Video with Blob URLs
  12. Dynamic page load can’t load Java with page
  13. jQuery document.createElement equivalent?
  14. Why I have to put all the script to index.html in jquery mobile
  15. Replacing css file on the fly (and apply the new style to the page)
  16. How to include multiple js files using jQuery $.getScript() method
  17. Prevent Page Load on Jquery Form Submit with None Display Button
  18. Benefits of loading JS at the bottom as opposed to the top of the document
  19. jquery submit form and then show results in an existing div
  20. jQuery – How to select by attribute
  21. time delayed redirect?
  22. Detect click event inside iframe
  23. Uploading Image to Amazon s3 with HTML, javascript & jQuery with Ajax Request (No PHP)
  24. Store jquery selector in variable
  25. How to add DOM element script to head section?
  26. Uncaught ReferenceError: $ is not defined error in jQuery
  27. Waiting for dynamically loaded script
  28. Change placeholder text
  29. Fire oninput event with jQuery
  30. canvas- Cropping images in different shapes

Leave a Comment