在uniapp中nvue页面中将上传的视频通过前端获取第一帧,并将第一帧图片作为封面保存到后端<video style="height: 350rpx;width: 750rpx;" :src="urls"/><view @click="upload(item)"> upload(item) { uni.chooseVideo({count: 1,sourceType: ['camera', 'album'],success: (e) => {filePath: e.tempFilePath解决案例
时间: 2024-03-17 09:44:46 浏览: 80
首先,你需要安装一个库 `ffmpeg`,通过命令行安装:`brew install ffmpeg`(MacOS)或者 `sudo apt-get install ffmpeg`(Linux)。
然后,在上传视频成功后,可以通过以下代码获取第一帧图片:
```javascript
uni.chooseVideo({
count: 1,
sourceType: ['camera', 'album'],
success: (res) => {
const tempFilePath = res.tempFilePath;
uni.getVideoInfo({
src: tempFilePath,
success: (infoRes) => {
const duration = infoRes.duration; // 视频时长
const thumbnailWidth = 720; // 缩略图宽度
const thumbnailHeight = 1280; // 缩略图高度
const thumbnailCount = 1; // 缩略图数量
const thumbnails = []; // 缩略图数组
const interval = duration / (thumbnailCount + 1); // 每个缩略图的时间间隔
for (let i = 1; i <= thumbnailCount; i++) {
const thumbnailTime = i * interval; // 缩略图的时间点
const thumbnailName = `thumbnail-${i}.jpg`; // 缩略图的文件名
const thumbnailPath = `${tempFilePath}_${thumbnailName}`; // 缩略图的文件路径
const thumbnailUrl = `http://localhost:3000/${thumbnailName}`; // 缩略图的访问路径
// 生成缩略图命令
const command = `ffmpeg -i ${tempFilePath} -ss ${thumbnailTime} -vframes 1 -s ${thumbnailWidth}*${thumbnailHeight} ${thumbnailPath}`;
// 执行命令
uni.request({
url: 'http://localhost:3000/execute',
method: 'POST',
data: {
command: command
},
success: (res) => {
thumbnails.push(thumbnailUrl);
}
});
}
}
});
}
});
```
在上述代码中,我们通过 `uni.chooseVideo` 方法选择了一个视频,并获取了视频的路径 `tempFilePath`。然后,我们通过 `uni.getVideoInfo` 方法获取了视频的时长 `duration`,并计算出了每个缩略图的时间间隔 `interval`。
接下来,我们通过循环生成了每个缩略图的命令,并通过 `uni.request` 方法执行了命令。在执行命令的同时,我们将缩略图的访问路径 `thumbnailUrl` 存储到了 `thumbnails` 数组中。
最后,我们可以将缩略图的访问路径发送到后端,保存缩略图。
阅读全文