chooseVideo传视频无法取到缩略图

微信小程序中 chooseVideo 和 chooseMedia 的区别

两者均为微信小程序提供的媒体选择接口,但功能和使用场景存在差异:

chooseVideo

专用于选择视频文件,支持从相册或相机拍摄获取视频。返回结果包含视频临时路径、时长、大小等信息,但不会自动生成缩略图。需通过 VideoContextwx.createMediaContainer 处理视频帧截图。

chooseMedia

为多类型媒体选择接口(图片+视频),支持同时选择或拍摄多种媒体文件。返回结果中,视频文件会默认生成首帧缩略图(thumbTempFilePath),适合需要预览的场景。


解决无缩略图问题的方法

方法1:使用 chooseMedia 替代

javascript 复制代码
wx.chooseMedia({
  count: 1,
  mediaType: ['video'],
  success(res) {
    console.log(res.tempFiles[0].thumbTempFilePath) // 自动生成的缩略图路径
  }
})

方法2:手动生成缩略图(chooseVideo场景)

javascript 复制代码
wx.chooseVideo({
  sourceType: ['album', 'camera'],
  success(res) {
    const videoCtx = wx.createVideoContext('videoPlayer');
    videoCtx.seek(0).then(() => {
      setTimeout(() => {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 300,
          height: 200,
          destWidth: 300,
          destHeight: 200,
          canvasId: 'snapshotCanvas',
          success(res) {
            console.log(res.tempFilePath) // 自定义缩略图
          }
        })
      }, 500)
    })
  }
})

关键差异总结

特性 chooseVideo chooseMedia
媒体类型 仅视频 图片+视频混合
缩略图生成 不支持 自动生成首帧缩略图
多选支持
返回数据结构 视频专属字段 统一媒体文件结构

建议根据实际需求选择接口:若需快速获取视频缩略图,优先使用 chooseMedia;若需要更专业的视频控制(如精确截帧),则选择 chooseVideo 配合手动处理。

相关推荐
我命由我1234513 小时前
微信小程序 - 避免在 data 初始化中引用全局变量
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
我命由我1234516 小时前
微信小程序 bind:tap 与 bindtap 的区别
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
我命由我1234519 小时前
微信小程序 - 页面跳转并传递参数(使用路由参数、使用全局变量、使用本地存储、使用路由参数结合本地存储)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
毕设源码-邱学长20 小时前
【开题答辩全过程】以 基于微信小程序的社区老年人活动中心信息管理系统的设计与实现 为例,包含答辩的问题和答案
微信小程序·小程序
李慕婉学姐20 小时前
基于微信小程序的康复医疗问诊服务平台5855qb95(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
数据库·spring boot·微信小程序
项目題供诗20 小时前
微信小程序黑马优购(项目)(六)
微信小程序·小程序
chéng ௹20 小时前
uniapp APP和微信小程序横屏模式
微信小程序·小程序·uni-app
Dest1ny-安全2 天前
CTF入门:国内线上CTF比赛时间及部分题目资源
网络·安全·web安全·微信小程序·php
kyh10033811202 天前
去水印微信小程序搭建
大数据·微信小程序·去水印·短视频去水印·去水印微信小程序