I'm picking a video from gallery and then show it a preview:
$("#filePhoto").change(function() {
var input = this;
if(input.files && input.files[0]) {
upload_file = input.files[0];
var type = upload_file.type;
var size = upload_file.size;
if(type == 'video/mp4' || type == 'video/webm'){
alert(size); // video size alerted and correct
var meme = "";
meme += '<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">';
meme += '<video loop class="video videopreview">';
meme += '<source src="" type="video/webm" />';
meme += '</video>';
meme += '</div>';
$('#previewholder_area').html(meme);
$('.videopreview source').attr('src', URL.createObjectURL(upload_file));
It works on PC and Android but not on iOS browsers, why could that be?
EDIT:
I just made that test:
$('.videopreview source').attr('src', 'https://file-examples.com/storage/fe783a5cbb6323602a28c66/2017/04/file_example_MP4_480_1_5MG.mp4');
and it still doesn't work on ios but PC/Android