<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<input type="file" name="myfiles" id="myfiles" onchange="uploadVideo('myfiles',this)">
<div id="videoarea"></div>
<div id="imgarea"><img src=""></div>
</body>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
function uploadVideo(field,that) {
var file = that.files[0];
//视频截图
windowURL = window.URL || window.webkitURL;
videoURL = windowURL.createObjectURL(file);
$('#videoarea').html('<video src="' + videoURL + '" controls="controls"></video>');
//
var formdata = new FormData();
formdata.append(field, file);
XHR = new XMLHttpRequest();
XHR.open('POST', 'baidu.addvideos?field='+field, true);
XHR.onreadystatechange = function() {
if (XHR.readyState == 4) {
if (XHR.responseText.indexOf('|') >= 0) {
//####
//####
//####
//视频截图
var scale = 0.25,
video = $('#videoarea').find('video')[0],
canvas = document.createElement("canvas"),
canvasFill = canvas.getContext('2d');
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvasFill.drawImage(video, 0, 0, canvas.width, canvas.height);
var src = canvas.toDataURL("image/jpeg");
$('#imgarea').attr('src',src);//图片展示
//
}
}
};
XHR.send(formdata);
}
</script>
</html>
吃水不忘挖井人: