搜索过 PHP 相关的代码 都需要第三方,想想现在 HTML5 那么强大,就用 JS 来实现吧
简单代码如下
<input type="file" onchange="update(this)" accept="video/*">
<script>
// 获取文件
function update(file) {
if (file.files.length) {
getVideoImage(file.files[0], function(a) {
console.log(a);
var img = document.createElement('img');
img.title = a.currentTime;
img.src = a.url;
document.body.appendChild(img);
});
}
file.value = null;
}
// 文件转 图片 关键函数 异步
function getVideoImage(file, call) {
if (file && file.type.indexOf('video/') == 0) {
var video = document.createElement('video');
video.src = URL.createObjectURL(file);
video.addEventListener('loadeddata', function() {
this.currentTime = 1
})
video.addEventListener('seeked', function () {
this.width = this.videoWidth;
this.height = this.videoHeight;
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 = {
url: canvas.toDataURL('image/jpeg', 1),
width: this.width,
height: this.height,
currentTime: this.currentTime,
duration: this.duration
};
canvas.toBlob(function(blob) {
image.blob = blob;
typeof call == 'function' ? call.call(file, image) : console.log(image);
}, 'image/jpeg');
});
}
}
</script>
返回数据如下:
{
"url": "data:image/jpeg;base64,/9j/4AAQSk.......",
"width": 654,
"height": 368,
"currentTime": 0,
"duration": 187.14202,
"blob": Blob
}
其中 url为 Base64 Url 字符串 可用于 src 本地提前展示
blob 字段 为 Blob 对象 可以直接用于异步上传
currentTime 为截图时间
duration 视频时长
更多需求参考 HTMLVideoElement 相关文档