从blob加载视频预览时的Jquery触发功能

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);
});