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=''
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 = $('
');
$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)
}
},