uview+微信小程序+实现视频压缩(本地压缩)

已于 2023-04-14 22:57:59 修改
阅读量1.5k 收藏 4
点赞数
文章标签： 微信小程序 小程序
于 2023-04-07 00:45:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61629497/article/details/130002678
版权

首先说明PC端的小程序是不可以使用的，这是因为wx.compressVideo在PC端不可用，这是腾讯的问题 可以使用ffmpeg插件可以解决这个问题（自行下载）;

效果1

 

 效果2

 页面1

<template>
	<view>
		<view class="top" style="background-color: #66CC99">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="视频压缩" :placeholder="true" :safeAreaInsetTop="true" fixed leftIconSize="0 !important" bgColor="#66CC99" :height="86 + 'rpx'"></u-navbar>
		</view>
		<view class="container" style="padding:30rpx">
			<view style="padding: 30rpx 0rpx;">
				<view style="text-align: center; height:400rpx;background-color: #F8F8F8;">
					<view style="padding: 150rpx;" v-if="videoSrc == ''" @click="chooseAndCompressVideo">
						<view class="icon iconfont icon-jiahao"></view>
						<view style="font-size:30rpx ;color:#BABABA;padding:20rpx 0;font-weight:bold">选择上传视频</view>
					</view>
					<view style="width: 100%;" v-else><video :src="videoSrc" class="videoClass"></video></view>

					<view v-if="videoSrc != ''">
						<view style="font-size: 28rpx; color: #BABABA;padding:20rpx">分辨率：{{ videoWidth }}x{{ videoHeight }},大小：{{ videoSize }}</view>
					</view>
				</view>
			</view>
			<view style="margin: 60rpx 0;padding:30rpx;background-color: #F8F8F8;" @click="show = true">
				<u-row custom-style="font-size:32rpx">
					<u-col span="6">选择压缩质量</u-col>
					<u-col span="6" custom-style="justify-content:flex-end !important">
						<u-row custom-style="justify-content:flex-end !important">
							<u-col span="10" align="right" justify="end" custom-style="text-align:right" v-if="type != ''">
								<text style="text-align: right;" v-if="type != ''">{{ type[0].shape }}</text>
							</u-col>
							<u-col span="2" align="right" justify="end" custom-style="text-align:right"><u-icon name="arrow-right" size="40"></u-icon></u-col>
						</u-row>
					</u-col>
				</u-row>
			</view>
			<view style=" font-size: 28rpx;color:#BABABA">
				<view class="">
					<view style="padding: 6rpx;">PC端暂不支持视频压缩。</view>
					<view style="padding: 6rpx;">压缩质量越好,文件压缩的就越少。</view>
					<view style="padding: 6rpx;color: #66CC99;">标清建议选低质量，高清选中质量，超清选高质量。</view>
					<view style="padding: 6rpx;color:#F44336 ">绝对不保存、不上传用户的所有视频信息!</view>
				</view>
			</view>
			<view style="padding:100rpx 0;">
				<view
					style="margin:60rpx 50rpx; padding:20rpx 0; border-radius: 20rpx;  text-align: center;font-weight:bold;background: linear-gradient(to top, #F2CE53, #FFF9C4);"
					@click="CompressVideo"
				>
					开始压缩
				</view>
				<view
					style="margin:60rpx 50rpx; padding:20rpx 0; border-radius: 20rpx;  text-align: center;font-weight:bold;background: linear-gradient(to top, #F2CE53, #FFF9C4);"
					@click="chooseAndCompressVideo"
				>
					重新上传
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" mode="bottom" safeAreaInsetBottom="true" round="20" bgColor="#F8F8F8">
			<view style="text-align: center;font-size: 32rpx;">
				<view class="" style="padding: 30rpx;margin:0 30rpx;">
					<view style="padding: 30rpx;" v-for="(item, index) in types" :key="index" @click="selectType(index)">{{ item.shape }}</view>
				</view>
				<view class="" style="padding:0 30rpx;"><view style="padding: 30rpx;">取消</view></view>
			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			show: false,
			videoSrc: '', // 压缩后的视频文件路径
			videoHeight: '',
			videoWidth: '',
			videoSize: '',
			type: [{ shape: '高', bit: 'high' }],
			compressVideo: '',
			types: [{ shape: '高', bit: 'high' }, { shape: '中', bit: 'medium' }, { shape: '低', bit: 'low' }]
		};
	},

	onLoad() {},

	methods: {
		...mapMutations(['compressVideoInfos']), // 将 mutations 中的 mapMutations 方法映射到组件中

		close() {
			this.show = false;
		},

		selectType(item) {
			if (item == 0) {
				this.type[0] = this.types[0];
				// console.log(this.type);
			} else if (item == 1) {
				this.type[0] = this.types[1];
			} else {
				this.type[0] = this.types[2];
			}
			this.show = false;
		},

		formatFileSize(fileSize) {
			if (fileSize < 1024) {
				return fileSize + 'B';
			} else if (fileSize < 1024 * 1024) {
				return (fileSize / 1024).toFixed(2) + 'KB';
			} else {
				return (fileSize / (1024 * 1024)).toFixed(2) + 'MB';
			}
		},
		formatFileSizeCompress(fileSize) {
			if (fileSize < 1024) {
				return fileSize + 'KB';
			} else if (fileSize < 1024 * 1024) {
				return (fileSize / 1024).toFixed(2) + 'MB';
			} else {
				return (fileSize / (1024 * 1024)).toFixed(2) + 'G';
			}
		},
		CompressVideo() {
			let that = this;
			if (this.videoSrc != '') {
				wx.showLoading({
					title: '正在压缩...',
					mask: true
				});
				wx.compressVideo({
					src: that.videoSrc, // 需要压缩的视频路径
					quality: 0.8, 
					bitrate: that.type[0].bit, // 比特率，单位为kbps
					fps: 30, // 帧率，默认为30
					resolution: 1, // 分辨率，取值为 0（压缩至 360P）或 1（压缩至 480P），默认为1
					success: res => {
						that.CompressVideoSrc = res.tempFilePath;
						// console.log(that.type[0].bit);
						wx.getVideoInfo({
							src: res.tempFilePath,
							success: function(res) {
								// console.log(res);
								let compressfileSize = res.size;
								let compressformattedFileSize = that.formatFileSizeCompress(compressfileSize);
								let arr1 = res;
								arr1.compressformattedFileSize = compressformattedFileSize;
								arr1.compressVideoSrc = that.CompressVideoSrc;
								console.log(that.CompressVideoSrc)
								that.compressVideoInfos(arr1);
								uni.navigateTo({
									url: '/pages/index/synthesize'
								});
								wx.hideLoading();
								wx.showToast({
									title: '压缩成功',
									icon: 'success',
									duration: 2000
								});
							}
						});
						that.videoSrc = res.tempFilePath;
					},
					fail: ({ errMsg }) => {
						wx.hideLoading();
						wx.showToast({
							title: '压缩失败',
							icon: 'none',
							duration: 2000
						});
						console.log('压缩失败', errMsg);
					}
				});
			} else {
				wx.showToast({
					title: '请先上传视频',
					icon: 'none',
					duration: 2000
				});
			}
		},
		chooseAndCompressVideo() {
			let that=this;
			wx.chooseVideo({
				maxDuration: 60,
				compressed:false,
				camera: 'back',
				success: res => {
					// console.log(res);
					wx.showLoading({
						title: '加载中...',
						mask: true
					});
					console.log(res);
					that.videoHeight = res.height;
					that.videoWidth = res.width;
					const fileSize = res.size;
					const formattedFileSize = that.formatFileSize(fileSize);
					that.videoSize = formattedFileSize;
					that.videoSrc = res.tempFilePath;
					wx.hideLoading();
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.videoClass {
	// margin:30rpx;
	width: 100%;
	height: 400rpx;
	// width:100vw;
	// padding: 30rpx;
}

//自行解决图标问题
@font-face {
	
}

.iconfont {
	font-family: 'iconfont' !important;
	font-size: 60rpx;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-jiahao:before {
	content: '\e636';
}
::v-deep .u-icon--right {
	justify-content: flex-end;
}
</style>

页面2

<template>
	<view>
		<view class="top" style="background-color: #66CC99">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar :autoBack="true" title="视频压缩" :placeholder="true" :safeAreaInsetTop="true" fixed leftIconSize="50rpx !important" bgColor="#66CC99" :height="86 + 'rpx'"></u-navbar>
		</view>

		<view class="container" style="padding:30rpx">
			<view style="padding: 30rpx 0rpx;">
				<view style="text-align: center; height:400rpx;background-color: #F8F8F8;">
					<view style="width: 100%;"><video :src="video_info.compressVideoSrc" class="videoClass"></video></view>
				</view>
			</view>

			<view style="padding: 30rpx;text-align: center;font-size:32rpx;color:#66CC99;font-weight:bold">压缩已完成，点击视频可预览</view>

			<view style="padding: 30rpx;font-size: 30rpx;background-color: #F8F8F8;border-radius: 20rpx;">
				<view>
					<view style="padding: 10rpx 0;">
						<u-row custom-style="padding:10rpx 0rpx">
							<u-col span="6">文件大小</u-col>
							<u-col span="6" custom-style="color: #bababa;"><view style="text-align: right;">{{video_info.compressformattedFileSize}}</view></u-col>
						</u-row>
						<u-row custom-style="padding:10rpx 0rpx">
							<u-col span="6">分辨率</u-col>
							<u-col span="6" custom-style="color: #bababa;"><view style="text-align: right;">{{video_info.width}}*{{video_info.height}}</view></u-col>
						</u-row>
						<u-row custom-style="padding:10rpx 0rpx">
							<u-col span="6">码率</u-col>
							<u-col span="6" custom-style="color: #bababa;"><view style="text-align: right;">{{video_info.bitrate}}kbps</view></u-col>
						</u-row>
						<u-row custom-style="padding:10rpx 0rpx">
							<u-col span="6">帧率</u-col>
							<u-col span="6" custom-style="color: #bababa;"><view style="text-align: right;">{{video_info.fps}}</view></u-col>
						</u-row>
					</view>

				<view style="padding:0rpx 0;">
					<view
						style="margin:60rpx 50rpx; padding:20rpx 0; border-radius: 20rpx;  text-align: center;font-weight:bold;background: linear-gradient(to top, #F2CE53, #FFF9C4);"
						@click="downloadCompressedVideo"
					>
						保存视频
					</view>
					<view
						style="margin:60rpx 50rpx; padding:20rpx 0; border-radius: 20rpx;  text-align: center;font-weight:bold;background: linear-gradient(to top, #F2CE53, #FFF9C4);"
						@click="chooseAndCompressVideo"
					>
						重新上传
					</view>
				</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex';
	import { mapState } from 'vuex';
export default {
	data() {
		return {
			videoSrc: ''
		};
	},
		computed: {
			...mapState({ video_info: state => state.compressVideoInfo }) // 将 state 中的 buildingInformation 对象映射到组件中
		},
		onLoad(){
		
		},
	methods:{
		downloadCompressedVideo() {
			const compressedVideoSrc = this.video_info.compressVideoSrc;
			
			
			
			wx.getSetting({
			  success: res => {
			    if (!res.authSetting['scope.writePhotosAlbum']) {
			      // 如果用户未授权，则打开授权界面
			      wx.authorize({
			        scope: 'scope.writePhotosAlbum',
			        success: () => {
			          // 用户已授权，保存视频文件
			        wx.saveVideoToPhotosAlbum({
			        	filePath: compressedVideoSrc,
			        	success: () => {
			        		wx.showToast({
			        			title: '保存成功',
			        			icon: 'success',
			        			duration: 2000
			        		});
			        	},
			        	fail: ({ errMsg }) => {
			        		wx.showToast({
			        			title: '保存失败',
			        			icon: 'none',
			        			duration: 2000
			        		});
			        		// console.log('保存失败', errMsg);
			        	}
			        });
			        },
			        fail: () => {
			          // 用户拒绝授权，提示用户打开授权界面
			          wx.showModal({
			            title: '保存失败',
			            content: '请在小程序设置中打开保存到相册的权限',
			            showCancel: false,
			            confirmText: '确定',
			            success: res => {
			              if (res.confirm) {
			                wx.openSetting({
			                  success: res => {
			                    // console.log(res);
			                  }
			                });
			              }
			            }
			          });
			        }
			      });
			    } else {
			      // 用户已授权，保存视频文件
			   wx.saveVideoToPhotosAlbum({
			   	filePath: compressedVideoSrc,
			   	success: () => {
			   		wx.showToast({
			   			title: '保存成功',
			   			icon: 'success',
			   			duration: 2000
			   		});
			   	},
			   	fail: ({ errMsg }) => {
			   		wx.showToast({
			   			title: '保存失败',
			   			icon: 'none',
			   			duration: 2000
			   		});
			   		console.log('保存失败', errMsg);
			   	}
			   });
			    }
			  }
			});

		},
		chooseAndCompressVideo(){
			uni.navigateBack({
				delta:1,
			})
		}
	}
};
</script>

<style scoped lang="scss">
.videoClass {
	// margin:30rpx;
	width: 100%;
	height: 400rpx;
	// width:100vw;
	// padding: 30rpx;
}
</style>

下方是小程序demo可以看看效果 

 

创作不易，点个赞吧~~~

技术不行但人小帅
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Springboot+vue+微信小程序开发实现的商城系统源码+项目说明.zip
12-20
基于Springboot+vue+微信小程序开发实现的商城系统源码+项目说明.zip 配置最小开发环境： MySQL JDK1.8或以上 Maven Nodejs 微信开发者工具 数据库依次导入mymall-db/sql下的数据库文件 mymall_schema.sql mymall_table.sql mymall_data.sql 启动小商场和管理后台的后端服务 打开命令行，输入以下命令 cd mymall mvn install mvn package cd ./mymall-all mvn spring-boot:run 启动管理后台前端 打开命令行，输入以下命令 npm install -g cnpm --registry=https://registry.npm.taobao.org cd mymall/mymall-admin cnpm install cnpm run dev 启动小商城前端 打开微信开发者工具，导入mymall-wx模块,点击编译即可，此时可以预览小商场效果。 这里存在两套小商场前端mymall-wx和renard-wx，开发者可以分别
uni-app小程序实现视频压缩及上传
DOM曼珠沙华的博客
05-13 5144
下面两张图是中的第一张图是选择视频进行上传，第二张图是视频上传后的展示操作 这里是有完成选择视频上传压缩，展示 选择视频： 上传视频后： ...
微信小程序引入uview后过大，或者本身的其他依赖导致过大，就可以使用分包，基于官方分包进行讲解
最新发布
weixin_48817925的博客
04-10 846
小程序超过2m，上传失败，分包操作
实现微信小程序上传视频的注意事项
github_38928905的博客
02-25 2476
小程序选择视频方法 根据官网的建议 文档原文： 拍摄视频或从手机相册中选视频。此接口不再更新，建议使用 wx.chooseMedia ，所以我这里使用的是 wx.chooseMedia wx.chooseMedia 需要关注 sizeType属性， 但是测试后发现： 使用 wx.chooseMedia 选择视频时，sizeType的参数配置[‘compressed’]时，如果视频文件是来自【从手机相册选择】则会压缩；如果视频文件来自相机【拍摄】则该属性无效； 注意：【拍摄】sizeType属性虽无效
uniapp上传图片、视频 包括预览、压缩、手动上传等功能
姥姥家的饭
10-24 820
插件地址：https://ext.dcloud.net.cn/plugin?id=8941#detail
小程序视频压缩并且设置视频时长
a_靖的博客
05-20 5080
压缩的效果还不错，36.5M 压缩成 2.1M，清晰度没差多少。 wx.chooseVideo(Object object) 拍摄视频或从手机相册中选视频。 sourceType Array.<string> ['album', 'camera'] 否 视频选择的来源 compressed boolean true 否 是否压缩所选择的视频文件 1.6.0 maxDuration number 60 ..
视频压缩 小程序，如何使用微信小程序视频压缩？
weixin_42603207的博客
12-22 4886
第一步：我们在小程序搜索栏搜索“视频压缩助手”，选择小程序，即可找到我们的小程序。 第二步：进入小程序后选择视频压缩，然后将需要压缩的视频。 选着本地压缩 或 线上压缩 提交 拖拽可更改压缩大小 完成 ...
小程序压缩视频 使用微信的compressVideo进行压缩，计算分辨率和码率关系进行压缩效果挺好
weixin_45057792的博客
03-25 4883
// 精密压缩 upLoladVideoFn(src,img,bitrate,resolution){ wx.showLoading({ title:'视频上传中...', icon:'none', mask:true }) // 压缩并上传 ...
uniapp+uview 简单实现视频播放
weixin_43048846的博客
07-10 707
【代码】uniapp+uview 简单实现视频播放。
uView上传组件upload上传auto-upload模式图片压缩
zoeou的博客
03-19 3768
参照手动上传的代码改的 https://blog.csdn.net/weixin_43841757/article/details/111040124 上传前的钩子before-upload html <u-upload :auto-upload="true" :before-upload="onBeforeUpload" ref="uUpload1" @on-choose-complete="onChooseComplete(1)" ....略其它 </u-upload> js onB
uniapp图片上传与压缩，兼容小程序与H5
resurgam
06-11 2654
【代码】uniapp图片上传与压缩，兼容小程序与H5。
微信小程序中上传图片并进行压缩的实现代码
10-18
主要介绍了微信小程序中上传图片并进行压缩的实现代码,文中提到了上传图片并进行压缩的属性值，需要的朋友可以参考下
微信小程序实现分享商品海报功能
12-13
我们在微信小程序中经常会使用到分享商品海报，或者是重绘微信小程序分享链的图片功能。实现该功能只要跟着如下几个步骤就可以快速实现啦！（本文示例代码使用的是uni-app，原生或者其他框架需要将uni前缀该成对应...
使用uniapp + uView 打造微信小程序&H5端 在线教育网校系统.zip
12-13
计算机类毕设源码
微信小程序(uniapp + uView)自定义导航栏
02-29
微信小程序(uniapp + uView)自定义导航栏
用Video标签实现简单的视频播放
qq_55774120的博客
05-14 3096
废话不多说直接上代码！！！ <template> <!-- Video组件 --> <div id="common-video" > <div > <video ref="myVideo" :poster="poster" src="src" :controls="controls" oncontextmenu="return f...
uniapp 使用uView框架 upload组件上传前压缩图片
Jadon_z的个人博客
03-29 3799
根据Uview官方文档所说，若是小程序和app项目，上传使用压缩图片，可以配置u-upload组件的sizeType属性为'compress'，但这对H5是无效的。在实际开发中，图片压缩上传经常是一个必要的需求，所以本篇文章主要讲的是在H5项目中如何使用Uview的upload组件进行压缩图片。
video标签的属性和事件用法大全
极客神殿
07-29 3359
1、video 属性 <!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" controls controlslist="nodownload" width="400" height="
uview实现点击预览图片效果
inexaustible的博客
11-07 8303
1、在页面的图片上添加点击事件： 2、方法： //预览图片 imgListPreview(){ var urlList = [] urlList.push(this.userInfo.avatar) //push中的参数为 :src="item.img_url" 中的图片地址 uni.previewImage({ ...
熟悉微信小程序开发流程，熟练使用uni-app + uView 面试题
06-05
好的，我可以简单介绍一下微信小程序开发流程和 uni-app + uView 的使用。 微信小程序开发流程： 1. 注册微信小程序账号并创建小程序项目。 2. 下载微信小程序开发工具，使用开发工具打开小程序项目。 3. 在开发工具中编辑小程序页面、组件、样式等内容，并实现小程序的业务逻辑。 4. 在开发工具中预览和调试小程序，调试完成后发布小程序。 5. 小程序上线后，可以通过微信公众平台进行管理和运营。 uni-app + uView 的使用： 1. 安装 uni-app 和 uView，可以使用 npm 进行安装。 2. 在 uni-app 中创建页面和组件，并使用 uView 提供的 UI 组件。 3. 在页面中实现业务逻辑，可以使用 uni-app 提供的 API 和 uView 提供的组件和方法。 4. 在开发工具中预览和调试 uni-app 项目，调试完成后可以使用微信小程序开发工具进行发布。 5. uni-app 还支持多端开发，可以将同一代码编译为多个平台的应用，例如微信小程序、H5、App 等。 需要注意的是，uni-app 和 uView 的使用需要具备一定的 Vue.js 开发经验和前端开发基础。同时，开发过程中需要考虑小程序的性能和兼容性问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值