webupload的视频预览

1.找到upload.js中的uploader.makeThumb方法，这个方法是用来生成缩略图
2.模仿此方法来写，首先调用makeVideo方法，根据获取到的视频url，用canvas生成预览图

uploader.makeVideo( file, function( error, src ) {
                    if ( error ) {
                        $wrap.text( '不能预览' );
                        return;
                    }else{
                        $("#yesia_div").remove();
                        div='<div style="display:none"  id="yesia_div">'+'<video src="' + src + '" controls="controls" id="yesia_video"></video>'+'</div>'
                        video='<video  src="' + src + '" controls="controls" id="yesia_video"></video>'
                        $("#wrapper").append(div)
             
                        $("#yesia_video").on("loadeddata", function (e) {
                            var obj = e.target;
                            var scale = 0.8;
                            var canvas = document.createElement("canvas");
                            canvas.width = obj.videoWidth * scale;
                            canvas.height = obj.videoHeight * scale;
                            canvas.getContext('2d').drawImage(obj, 0, 0, canvas.width, canvas.height);
                            var src= canvas.toDataURL("image/png")
                            img = $('<img style="width:110px" src="'+src+'">');
                            $wrap.empty().append( img );
                            document.getElementById('first_image').value=src
                          
                        } )
                    }             
                 
                }, thumbnailWidth, thumbnailHeight );

在webupload.js中添加makeVideo

  makeVideo:'make-video',

添加位置如图所示

// 批量添加纯命令式方法。
        $.each({
            upload: 'start-upload',
            stop: 'stop-upload',
            getFile: 'get-file',
            getFiles: 'get-files',
            addFile: 'add-file',
            addFiles: 'add-file',
            sort: 'sort-files',
            removeFile: 'remove-file',
            cancelFile: 'cancel-file',
            skipFile: 'skip-file',
            retry: 'retry',
            isInProgress: 'is-in-progress',
            makeThumb: 'make-thumb',
            makeVideo:'make-video',
            md5File: 'md5-file',
            getDimension: 'get-dimension',
            addButton: 'add-btn',
            predictRuntimeType: 'predict-runtime-type',
            refresh: 'refresh',
            disable: 'disable',
            enable: 'enable',
            reset: 'reset'
        }

同时增加具体的makeVideo方法，此方法是为了获取视频的url
注意：cb是回调函数

  makeVideo: function( file, cb, width, height ) {

                format=file.name.substr(-4,4);
                if(format=='.mp4')
                {
                    windowURL = window.URL || window.webkitURL;
                    videoURL = windowURL.createObjectURL(file['_events'][0].ctx2.source.source);
                    cb( false, videoURL );
                }else{
                    cb(true)
                }


            },