uniapp - 【全端兼容】实现保存视频到手机相册功能，将 mp4 在线视频下载并存储到用户的手机中，uniapp App h5 小程序将视频文件下载保存（详细示例源码及注释一键复制，开箱即用！）

已于 2024-05-10 09:54:41 修改
阅读量4.5k 收藏 4
点赞数 4
分类专栏： 前端组件与功能(开箱即用) 文章标签： uniapp保存视频到相册教程 unia小程序将视频下载到相册 h5网页保存视频到手机 app安卓苹果实下载视频到本地 uniapp视频存到手机相册
于 2023-06-08 17:24:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/131112040
版权

效果图

在uniapp小程序/h5网页网站/安卓苹果app/nvue等（全平台完美兼容）开发中，详细实现手机保存视频到相册功能，点击保存按钮后下载视频并将其存储到用户的手机相册中，完整示例源码及注释，新手小白开箱即用！

uniapp Vue3和Vue2都能用，直接复制代码，稍微改下就能用到你的项目中去了（保证可用）。

在这里插入图片描述

完整代码

可复制运行，或按需复制。

<template>
了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
UNI-APP_保存视频到手机相册
小歪博客
04-19 959
uni.downloadFile({ url: '必填，附件网络地址', success: (res) => { const that = this if (res.statusCode === 200) { // 保存视频到手机相册 uni.saveVideoToPhotosAlbum({ filePath: res.tempFilePath, success: function() { // 成功提示 uni.showToast({
iOS实现视频下载并自动保存到相册功能
08-25
主要为大家详细介绍了ios 视频下载功能实现，并自动保存到相册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uni-app视频保存到本地/相册
晨的一朵云的博客
01-30 7093
需求： 页面标题为视频名称，视频可播放观看，允许播放手势（如双击切换暂停/播放，拖拽改变视频进度等），显示静音和全屏按钮，其余类似弹幕等功能不需要。视频下方按钮“保存视频到相册”，允许下载视频到本地，下载成功后需提示。 知识点： 1、video 组件：视频播放组件，官网API：uni-app官网 2、uni.setNavigationBarTitle：动态设置当前页面的标题，官网API：uni-app官网 3、uni.downloa...
小程序视频怎么保存到本地
最新发布
xiaoheilaoshi的博客
03-30 747
本文提供了一套清晰的指南，用于指导用户如何从各种小程序中下载视频内容。通过一系列简单的步骤，包括找到对应小程序的视频分享功能、使用下载按钮或链接，以及如何利用第三方应用进行下载，用户可以轻松地将喜欢的视频保存到自己的设备上。文章同样提到了确保下载过程遵循相应版权规定的重要性，以及在保护个人隐私方面的考虑。无论是出于学习还是娱乐的目的，这篇文章都能帮助用户有效地下载小程序视频，增强他们的数字内容体验。
uni-app移动端-H5-微信小程序下载保存图片，文档和视频到手机,带进度条
weixin_45145119的博客
05-09 1840
移动端-H5-微信小程序下载保存图片，文档和视频到手机,带进度条
全端兼容的前端h5预览pdf插件
03-22
全端兼容的前端h5预览pdf插件,开箱即用，完美兼容PC和移动端 直接引用pdf.html?file=/upload/pdf.pdf即可
Python3 - h5在微信内保存视频到相册
韩俊强的博客
03-23 730
在手机端微信App中打开下载页面，使用微信App的扫一扫功能扫描二维码，即可下载视频并保存到相册中。将视频文件保存在服务器上，将视频文件名修改为video.mp4。
uniapp 下载视频到本地
qq_43402051的博客
01-05 5279
这是一个下载视频的demo，可以直接使用 使用uni.downloadFile先将文件下载到缓存中然后使用uni.saveVideoToPhotosAlbum下载到用户本地，这里有一些基本的提示，足够基本的业务需求，如果有额外需求在上面扩展即可 // 下载视频 uploadVideo() { // 提醒用户下载中 uni.showToast({title:"下载中",icon:"loading"}) // 1 将远程文件下载到小程序的内存中 uni.downloadFile({
uniapp 下载视频到手机
nelly521的博客
10-27 462
注：下载视频在图集里，而不是像册。
【uniapp】微信小程序中的视频下载和分享、PDF下载和分享、完整下载（图片、视频、各种文件）
Qxn530的博客
10-10 4682
微信小程序中的视频下载（点击全屏播放视频）以及PDF下载和分享、完整下载（图片、视频、各种文件）
uni-app 框架建小程序跳转h5页面播放视频并下载到本地
m0_70190404的博客
04-11 1292
uni-app 框架建小程序跳转h5页面播放视频并下载到本地
前端uniapp表情插件
05-09
前端uniapp表情插件
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
Uniapp 平台兼容性 全端支持 引入组件即可
uniapp全端《智能取名》源码
09-03
快速智能取名，并且评分，解译，1.0.0版本 只需修改API接口即可 接口位置:/api/request.js 可以二开自行开发，或直接引用组件。
一个移动端H5Video标签播放视频的实现
08-11
一个移动端 H5 Video 标签播放视频的实现
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
09-26
引入组件即可 <template> <TC-choujiang></TC-choujiang> </template> 里面的商品图片和被抽出商品跳转页面按照实际情况进行修改。 商品图片可以从数据库中获取进行赋值即可 位置：uni_modules/TC-choujiang/components/TC-choujiang/TC-choujiang
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
微信H5保存或下载视频到本地，将视频直接分享视频给好友
bear的博客
12-26 8072
微信H5保存或下载视频到本地，将视频直接分享视频给好友
Uniapp APP手机本地缓存图片、svga、视频等文件
liushihao_的博客
07-03 564
Uniapp APP手机本地缓存图片、svga、视频等文件
uniapp h5保存视频到相册
09-22
在uniapp中，要将H5页面中的视频保存到相册，可以通过以下步骤实现： 1. 首先，在H5页面中，使用`<video>`标签加载视频文件，并提供保存按钮给用户。例如： ```html <video src="your_video_url" controls></video> <button @click="saveVideo">保存到相册</button> ``` 2. 在uniapp的页面或组件的`methods`中，定义保存视频的方法，并使用`uni.saveImageToPhotosAlbum` API进行保存。例如： ```javascript methods: { saveVideo() { // 获取视频地址 const videoUrl = 'your_video_url'; // 将视频保存到相册 uni.saveVideoToPhotosAlbum({ filePath: videoUrl, success() { uni.showToast({ title: '保存成功', }); }, fail() { uni.showToast({ title: '保存失败', icon: 'none', }); }, }); }, }, ``` 3. 在保存成功和失败的回调函数中，通过`uni.showToast`来显示相应的提示信息。 需要注意的是，由于不同浏览器对视频保存的支持程度不同，使用该方法保存视频可能在某些浏览器上无效。另外，为了确保用户能够成功保存视频，不要忘记请求用户授权使用相册的权限。 总结起来，要在uniapp的H5页面中保存视频到相册，主要步骤包括加载视频文件、定义保存视频的方法并调用保存API、处理保存成功和失败的回调。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值