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

小程序获取视频第一帧

最近有个小程序项目，需要在页面中展示大量的视频，但是不用播放。后来遇到问题，小程序不可以在一个页面中放置超过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) {
          //wx.saveImageToPhotosAlbum方法：保存图片到系统相册
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath, //图片文件路径
            success: function (data) {
              wx.hideLoading(); //隐藏 loading 提示框
              that.setData({
                showTips: true,
                toastTips: '下载成功，已保存到相册',
              })
            },
            // 接口调用失败的回调函数
            fail: function (err) {
              if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
                wx.showModal({
                  title: '提示',
                  content: '需要您授权保存相册',
                  modalType: false,
                  success: modalSuccess => {
                    wx.openSetting({
                      success(settingdata) {
                        console.log("settingdata", settingdata)
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                          wx.showModal({
                            title: '提示',
                            content: '获取权限成功,再次点击下载即可保存！',
                            modalType: false,
                          })
                        } else {
                          wx.showModal({
                            title: '提示',
                            content: '获取权限失败，将无法保存到相册！',
                            modalType: false,
                          })
                        }
                      },
                      fail(failData) {
                        console.log("failData", failData)
                      },
                      complete(finishData) {
                        console.log("finishData", finishData)
                      }
                    })
                  }
                })
              }
            },
            complete(res) {
              wx.hideLoading(); //隐藏 loading 提示框
            }
          })
        }

      }
    })
  },