思路，加载一个，video 播放器，然后通过 canvas 画布drawImage 方法将video元素 生成图像
如果需要上传图片到后面保存也是可以的，如下是一个我在工作中实际写的代码，仅作为参考：
//获取视频封面
function getVideoImage(blobUrl, call) {
var video = $("#video-screenshot");
if (video.length<1) {
video = $('<video style="height: 0; width: 0;" id="video-screenshot">').appendTo("body");
video[0].addEventListener('loadeddata', function(e) {
// console.log(e);
this.width = this.videoWidth;
this.height = this.videoHeight;
this.currentTime = this.duration > 10 ? 10 : this.duration/2;
// this.play();
// this.pause();
var _this = this;
setTimeout(function () {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = _this.width;
canvas.height = _this.height;
ctx.drawImage(_this, 0, 0, canvas.width, canvas.height);
var image = {
width: _this.width,
height: _this.height,
currentTime: _this.currentTime,
duration: _this.duration
};
canvas.toBlob(function(blob) {
image.blob = blob;
image.url = URL.createObjectURL(blob);
typeof call == 'function' ? call.call(this, image) : '';
});
}, 300);
});
}
video[0].pause();
video[0].src = blobUrl;
}
//选择封面图
$("#choose-image").click(function (e) {
var $this = $(this), image = $("#preview-image")[0], blob = image.blob, filename = image.filename;
var filenamearr = filename.split('.');
filenamearr.splice(-1);
var url = '/upload';
var formData = new FormData();
formData.append('filedata', blob, filenamearr.join(',')+'.jpg');
formData.append("moredata", '其他字段可添加');
//上传图片
$this.prop('disabled', true);
$.ajax({
url: url,
type: 'POST',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function (res) {
$this.prop('disabled', false);
//成功
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$this.prop('disabled', false);
console.error('上传封面图出错', textStatus, errorThrown);
}
});
});
$("#files").change(function (event) {
if (!event.target.files[0]) return;
if (event.target.files[0].type.indexOf('video/') != 0) return simpleDialog({msg: '请选择视频文件'});
//自动获取封面图
var blobUrl = URL.createObjectURL(event.target.files[0]);
getVideoImage(blobUrl, function(image) {
$("#preview-image").attr('src', image.url);
$("#preview-image")[0].blob = image.blob;
$("#preview-image")[0].filename = event.target.files[0].name;
$("#preview-video").show();
});
});
HTML:
<div class="form-group">
<label class="required">视频文件 <span class="required">*</span></label>
<input type="file" id="files" class="form-control"/>
<div class="pre-video" id="preview-video" style="display: none;margin-top: 10px;">
<image id="preview-image" style="width: 240px; height: 135px; display: inline-block;" />
<button class="btn btn-default" id="choose-image" type="button" style="vertical-align: top;">选择此封面</button>
</div>
<p class="help-block">请上传1920*1080视频</p>
</div>