uni-app视频保存到本地/相册

需求：

页面标题为视频名称，视频可播放观看，允许播放手势（如双击切换暂停/播放，拖拽改变视频进度等），显示静音和全屏按钮，其余类似弹幕等功能不需要。视频下方按钮“保存视频到相册”，允许下载视频到本地，下载成功后需提示。

知识点：

1、video 组件：视频播放组件，官网API： uni-app官网

2、uni.setNavigationBarTitle：动态设置当前页面的标题，官网API：uni-app官网

3、uni.downloadFile：下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径，注意：想要保存视频必须先下载视频；官网API：uni-app官网

4、uni.saveVideoToPhotosAlbum：保存视频到系统相册，官网API：uni-app官网

<template><view><video class="video-play":src="url" :poster="img" :title="title" show-fullscreen-btnshow-mute-btn enable-play-gesture/><u-button @click="saveVideo">保存视频到相册</u-button><u-toast ref="uToast" /></view>
</template><script>
export default {name: 'PlayVideo', // 播放视频data() {return {title: '', // 视频标题url: '', // 视频地址img: '' // 视频封面}},onLoad(option) {// 获取前页跳转带过来的视频信息const video = JSON.parse(decodeURIComponent(option.video))this.title = video.namthis.url = video.urlthis.img = video.img// 设置小程序页面标题 为视频标题uni.setNavigationBarTitle({ title: this.title })// 交互新增浏览次数...},methods: {// 保存按钮saveVideo() {// 打开loading等待uni.showLoading({ mask: true, title: '加载中' })// 先下载视频uni.downloadFile({url: this.url,success: (res) => {const that = thisif (res.statusCode === 200) {// 关闭loadinguni.hideLoading()// 保存视频到手机相册uni.saveVideoToPhotosAlbum({filePath: res.tempFilePath,success: function() {// 成功提示that.$refs.uToast.show({title: '保存成功', type: 'success', position: 'bottom'})}})}}})}}
}
</script>
<style scoped>.video-play { width: 100vw; }
</style>

uni-app视频保存到本地/相册相关推荐

短视频平台开发，将图片、视频保存到本地的相册中
短视频平台开发,将图片.视频保存到本地的相册中实现的相关代码获取本地相册 - (IBAction)goodsButton1Touch:(id)sender {//拿到获取相册的权限if([UIIma ...
uniapp 生成分享图片(图片+二维码)，并保存到本地相册功能实现
生成分享图片使用场景在使用电商app时,通常有个分享给好友的功能,如果想要做分销类型,发展下线,也就是你邀请的好友是你的下级的话,就需要分享时将个人信息附带进去,因此会涉及到生成分享图片. 界面 ...
uni-app小程序，将base64图片保存到本地相册
描述在做项目时,通过填写个人信息,生成一个二维码,现在要求将生成的二维码保存到本地,当点击图片上面的"保存到本地"时,就会将图片保存到本地相册里实现过程下面代码中的picUr ...
iphone safaric中将mp4保存到本地相册
最近需要把微信公众号的视频保存到本地,但是实验了几次都不行,后来用safaric上的原生功能实现了将视频保存到相册中,虽然不是代码实现的,但也不失为一种解决方案吧,文章地址: iphone safar ...
android 本地图片分享,Android 把图片保存到本地相册
[实例简介] 把图片保存到本地相册,实现本地相册资源同步化 [实例截图] [核心代码] Scanner └── Scanner ├── AndroidManifest.xml ├── bin │ ...
VUE微信H5生成二维码海报保存在本地相册
VUE微信H5生成二维码海报保存在本地相册一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需 ...
React Native - 使用CameraRoll将图片保存到本地相册
PS: 以下内容经过本人亲自尝试证明在IOS设备上简单有效 // IOS需要授权认证才允许保存图片,非常重要,记得配置: 由于苹果安全策略更新,还需要在 Info.plist 配置请求照片相的关描述 ...
微信小程序（canvas）画图保存到本地相册（wepy）
html标签部分因为这个需要用户授权所以需要使用button,画布使用的是canvas,这个可以参考小程序官方文档,代码如下 <button class='btn' type="d ...
uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...

uni-app视频保存到本地/相册

uni-app视频保存到本地/相册相关推荐

最新文章

热门文章