Функция запуска JQuery, когда видео-предварительный просмотр загружен из blob

Question

У меня есть функция, которая позволяет пользователям выбирать и загружать видео с их компьютера или устройства, когда пользователь выбирает файл, который он просматривает сам себе (изображения/видео). Функция работает отлично для изображений, но не захватывает загрузку видео. Это все еще работает, если видео загружается как blob, а также если элементы html создаются с помощью javascript?

код что-то вроде этого

function() { 
    //first run file check restrictions 
    //if no errors 



var chatW = $('#chatView #chatWindow'); 
     var parent = $('<li/>', { class : 'me', 'data-role' : 'none'}); 
     var pp = $('<div/>', {class : 'pp'}); 
     var msg = $('<div/>', { class : 'message file_' + type + '', 'data-date' : 'NEW DATE', id : 'chat_TEMPID' }); 
     switch(type){ 
      case 'image': 
       var FR= new FileReader(); 
       FR.onload = function(e) { 
        msg.css('background-image', 'url(' + e.target.result + ')'); 
       };  
       FR.readAsDataURL(this.files[0]); 
       ///handle the the upload 
       var imageSize = readableSize(filesize); 

       var loader = $('<div/>', {class : 'not_saved', 'data-size' : imageSize}); 
       loader.data('size', imageSize); 
       loader.appendTo(msg); 
      break; 
      case 'video': 
       var url = window.URL.createObjectURL(file); 
       var video = $('<video/>', { autoplay : false, src : url }); 
       video.appendTo(msg); 
       function checkLoad() { 
        if (video.readyState === 4) { 
         video.currentTime = (10/29.97); 
         console.log('Video has loaded'); 
        } else { 
         console.log('Not Loaded'); 
         setTimeout(checkLoad, 100); 
        } 
       } 
       checkLoad(); 
       var loader = $('<div/>', {class : 'not_saved', 'data-size' : readableSize(filesize)}); 
       loader.data('size', readableSize(filesize)); 
       loader.appendTo(msg); 
      break; 
      case 'file': 
       //and so on 
      break; 
      case 'other': 
       //and so on 
      break; 
     } 
     pp.appendTo(parent); 
     msg.appendTo(parent); 
     parent.appendTo(chatW); 

} 

Проблема я думаю, что эта часть функции:

case 'video': 
       var url = window.URL.createObjectURL(file); 
       var video = $('<video/>', { autoplay : false, src : url }); 
       video.appendTo(msg); 
       function checkLoad() { 
        if (video.readyState === 4) { 
         video.currentTime = (10/29.97); 
         console.log('Video has loaded'); 
        } else { 
         console.log('Not Loaded'); 
         setTimeout(checkLoad, 100); 
        } 
       } 
       checkLoad(); 
       var loader = $('<div/>', {class : 'not_saved', 'data-size' : readableSize(filesize)}); 
       loader.data('size', readableSize(filesize)); 
       loader.appendTo(msg); 
      break; 

видео делает нагрузку и, если я установить элементы управления я могу играть видео , Шлейфы функции проверки нагрузки работают по постоянному контуру.

Полный код

var validateFileUpload = function() { 
    var file = this.files[0]; 
    var type = file.type.split('/'); type = type[0]; 
    var filesize = file.size; 
    if(type != 'video' && type != 'image' && type != 'text'){ type = 'other'; } 
    var restrictions = { 
     video : { 
      size : 30000000, /* 30mb */ 
      warning : 'Videos should be less than 30MB in size' 
     }, 
     image : { 
      size : 15000000, /* 15mb */ 
      warning : 'Images should be less than 15mb in size' 
     }, 
     text : { 
      size : 5000000, /* 5mb */ 
      warning : 'Text files should be less than 5mb in size' 
     }, 
     other : { 
      size : 30000000, /* 30mb */ 
      warning : 'All other files should be less than 10mb' 
     } 
    }; 
    var readableSize = function (bytes){ 
     if(bytes == 0) return '0 Byte'; 
     var k = 1000; 
     var dm = 1 || 3; 
     var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; 
     var i = Math.floor(Math.log(bytes)/Math.log(k)); 
     return parseFloat((bytes/Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; 
     if(filesize < 1000){ 
      return filesize + 'BTYES'; 
     } else if(filesize >= 1000 && filesize < 10000){ 
      return Math.round(filesize/10000) + 'KB'; 
     } else { 
      return Math.round(filesize/100000) + 'MB'; 
     } 
    } 
    if(filesize > restrictions[type].size){ 
     makeToast(restrictions[type].warning); 
    } else { 
     var chatW = $('#chatView #chatWindow'); 
     var parent = $('<li/>', { class : 'me', 'data-role' : 'none'}); 
     var pp = $('<div/>', {class : 'pp'}); //add background image in here 
     var msg = $('<div/>', { class : 'message file_' + type + '', 'data-date' : 'NEW DATE', id : 'chat_TEMPID' }); //change the temp ID after send 
     switch(type){ 
      case 'image': 
       //this will need changing to cordova function later 
       var FR= new FileReader(); 
       FR.onload = function(e) { 
        //EL("img").src  = e.target.result; 
        //EL("b64").innerHTML = e.target.result; 
        msg.css('background-image', 'url(' + e.target.result + ')'); 
       };  
       FR.readAsDataURL(this.files[0]); 
       ///handle the the upload 
       var imageSize = readableSize(filesize); 

       var loader = $('<div/>', {class : 'not_saved', 'data-size' : imageSize}); 
       loader.data('size', imageSize); 
       loader.appendTo(msg); 
      break; 
      case 'video': 
       var url = window.URL.createObjectURL(file); 
       var video = $('<video/>', { autoplay : false, src : url }); 
       video.appendTo(msg); 
       function checkLoad() { 
        if (video.readyState === 4) { 
         video.currentTime = (10/29.97); 
         console.log('Video has loaded'); 
        } else { 
         console.log('Not Loaded'); 
         setTimeout(checkLoad, 100); 
        } 
       } 
       checkLoad(); 
       var loader = $('<div/>', {class : 'not_saved', 'data-size' : readableSize(filesize)}); 
       loader.data('size', readableSize(filesize)); 
       loader.appendTo(msg); 
      break; 
      case 'file': 
       //and so on 
      break; 
      case 'other': 
       //and so on 
      break; 
     } 
     pp.appendTo(parent); 
     msg.appendTo(parent); 
     parent.appendTo(chatW); 
     //prepare uploader and cancel button 
     var loading = $('<div/>',{ class : 'downloading'}); 
     loader.after().on('click', function() { 
      loading.remove(); 
      parent.fadeOut(250, function() { 
       parent.remove(); 
      }); 
     }); 
     loading.appendTo(loader); 
     loading.animate({'width' : '100%'}, 3000, function(){ 
      msg.removeClass('not_saved'); 
     }); 
    } 
}; 

Answer 1

Если вы не запустить видео, то вам нужно загрузить что-нибудь. Одним из решений является использование preload="metadata" и привязка к событию loadedmetadata.

Пример:

var aspectratio=1; 
var video = $('<video/>', { autoplay : false, src : url, preload:'metadata' }); 
video.on('loadedmetadata',function() { 
    var width = this.videoWidth; 
    var height = this.videoHeight; 
    aspectratio=width/height; 
    console.log(aspectratio); 
});