收藏
回答

H5嵌入一个视频,怎么通过微信内置游览器保存到手机相册,求大佬指点一二?

现在有个需求,在H5的页面上放一个视频,想把这个视频通过微信内置游览器打开的时候可以将这个视频保存到手机里面(一键下载或者长按保存都可以),希望了解的大佬指点一二。

回答关注问题邀请回答
收藏

4 个回答

  • 菜汤子拌饭
    菜汤子拌饭
    2024-08-08

    用vue的插件后面实现了,望周知

    2024-08-08
    有用
    回复 2
    • Mr.Ding
      Mr.Ding
      2024-09-09
      求问是哪个插件
      2024-09-09
      回复
    • 该用户已成仙
      该用户已成仙
      02-17
      同求
      02-17
      回复
  • 温眸
    温眸
    2022-08-01

    问一下实现了吗


    2022-08-01
    有用
    回复 1
    • 菜汤子拌饭
      菜汤子拌饭
      2024-02-28
      没实现,后面做小程序了
      2024-02-28
      回复
  • Zrong
    Zrong
    2022-07-21

    请问大佬您后面解决这个问题了吗?方案是什么呀?

    2022-07-21
    有用
    回复 2
    • Zrong
      Zrong
      2022-09-06
      在小程序中嵌入的H5,得到视频地址后跳转回小程序下载:
      H5跳转小程序




      小程序中实现一键下载并保存到相册功能
      // pages/downloadVideo/downloadVideo.js
      Page({
        /**
         * 页面的初始数据
         */
        data: {
          videoUrl: '',
           //初始值设置为不显示
           isShow:"none"
        },
        downloadVideoBtn(){
          this.onStartDownload()
        },
        downloadVideo(){
          //将this对象复制到临时变量that
         var that = this;
          wx.showLoading({
            title: '下载中',
            mask:true
          })
          let fileName = new Date().valueOf();
          console.log('downloadFile调用:this.data.videoUrl', this.data.videoUrl)
          wx.downloadFile({
            url: this.data.videoUrl,
            filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',
            header: {
              "Content-Type":"video/mp4"
              },
            success: res => {
              console.log('downloadFile成功回调res:', res)
              wx.hideLoading()
              let filePath = res.filePath; // 下载到本地获取临时路径
              let fileMgr = wx.getFileSystemManager();
              wx.saveVideoToPhotosAlbum({ // 保存到相册
                filePath,
                success: file => {
                  console.log('saveVideoToPhotosAlbum成功回调file:', file)
                  wx.showToast({
                    title: '视频保存成功',
                    duration:3000,
                    icon:'none'
                  })
                  fileMgr.unlink({ // 删除临时文件
                    filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',
                  })
                },
                fail: err => {
                  console.log('saveVideoToPhotosAlbum失败回调err:', err)
                  fileMgr.unlink({ // 删除临时文件
                    filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4'
                  })
                  wx.showToast({
                    title: '视频保存失败',
                    duration:3000,
                    icon:'none'
                  })
                },
                complete() {
                  wx.hideLoading()
                  that.setData({ // 将web-view展示,即跳转至H5
                    isShow: 'block'
                  })
                }
              })
            },
            fail(e) {
              console.log('失败e', e)
              wx.showToast({
                title: '视频保存失败1',
                duration:3000,
                icon:'none'
              })
            },
            complete() {
              // wx.hideLoading();
            }
          })
        },
        onStartDownload(){
          //获取用户授权
          wx.getSetting({
            success:(res)=> {
              if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
                wx.authorize({
                  scope: 'scope.writePhotosAlbum',
                  success:()=> {
                    console.log('打开了授权')
                    this.downloadVideo()
                  },
                  fail:(err)=> {
                    console.log('授权失败:', err)
                  }
                })
              } else if (!res.authSetting['scope.writePhotosAlbum']) {
                wx.openSetting({
                  success:(res)=> {
                    console.log('openSetting成功回调:res', res)
                    if (res.authSetting['scope.writePhotosAlbum']) {
                      console.log('授权了')
                      this.downloadVideo()
                    } else {
                    }
                  },
                  fail:(err)=> {
                  },
                })
              } else {
                this.downloadVideo()
              }
            }
          })
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad(options) {
          let that = this
          console.log('打开了小程序的下载视频页面:options.videoUrl', options.videoUrl)
          this.setData({// 把从H5页面获取到的属性值赋给,供页使用
            videoUrl:options.videoUrl
          })
          this.onStartDownload()
          console.log('that.data.videoUrl:', that.data.videoUrl)
        },
      2022-09-06
      回复
    • 菜汤子拌饭
      菜汤子拌饭
      2024-02-28回复Zrong
      我后面也用小程序解决了
      2024-02-28
      回复
  • MORNINGSTART(tiezhu)
    MORNINGSTART(tiezhu)
    2021-01-15

    a标签直接下,不可以嘛,ios可能不行,有安全提示

    2021-01-15
    有用
    回复 1
    • 菜汤子拌饭
      菜汤子拌饭
      2021-01-15
      不行,安卓都不行,提示下载qq游览器下载
      2021-01-15
      回复
登录 后发表内容
问题标签