小程序获取视频第一帧并保存

最新推荐文章于 2025-09-01 16:12:09 发布

原创

最新推荐文章于 2025-09-01 16:12:09 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#音视频 #微信小程序 #前端

文章介绍了如何在微信小程序中展示大量视频的解决方案，当超过5个video标签时，通过添加参数`?x-oss-process=video/snapshot,t_0,f_jpg`获取视频第一帧作为图片显示。使用`wx.downloadFile`下载第一帧图片，然后用`wx.saveImageToPhotosAlbum`保存至相册。在用户未授权保存相册时，提供了处理策略。

小程序获取视频第一帧

最近有个小程序项目，需要在页面中展示大量的视频，但是不用播放。后来遇到问题，小程序不可以在一个页面中放置超过5个video标签，否则播放视频加载不到。
经过度娘查询找到一篇大佬的文章，在这里记录下:

<video src="{
  
  {url}}" :poster="" controls :show-center-play-btn="false" auto-pause-if-navigate></video>
//图片也可以用
<image src="{
  
  {url}}?x-oss-process=video/snapshot,t_0,f_jpg" mode=""></image>
//只需要在地址后面加这一段代码就可以了
'?x-oss-process=video/snapshot,t_0,f_jpg'

保存

  // 点击下载图片事件
  downloadImg() {
    let that = this
    wx.showLoading({
      title: '加载中...',
      mask: true,
    })
    //wx.downloadFile方法：下载文件资源到本地
    wx.downloadFile({
      //只需要在地址后面加这一段代码就可以获取视频第一帧
      // '?x-oss-process=video/snapshot,t_0,f_jpg'
      url: that.data.videoUrl + '?x-oss-process=video/snapshot,t_0,f_jpg', //图片地址
      success: function (res) {
        console.log(res)
        if (res.statusCode == 200) {
          /