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.
I am using basic HTML tag to show. but it is not working.
Here is code:
@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.