html

<!-- 上传视频 --><view class="Voice_input"><text class="Voice_title">上传视频:</text><view class="" ><view class="video_image"><view class="video_box" v-for="(item,index) in videoSrc" :key='index'><video v-show="videoSrc" class="showvideo" :src="item"></video></view><image class="videoshow" v-show="showvideoimga"  src="../../static/images/yinyue.png" @tap="showvideo"></image></view><view><progress :percent="deflautWidth" v-show="showProgress" color="pink" stroke-width="15" class="progressStyle" /><!-- <progress percent="deflautWidth" hidden="showProgress" color="pink"   stroke-width="15"  class="progressStyle" /> --><camera   v-show="hidden" flash="off" style="width: 100%; height: 100%;position:fixed;top:0;z-index:1111;left:0;"></camera><view class="btn-area"  ><view class=""><text  class="videBtn" @touchstart="handleTouchStart" @touchend="handleTouchEnd" v-show="hidden" @longpress="handleLongPress" >按住拍</text></view></view></view></view></view>

css样式

/* 上传视频 */.video_image{width: 700rpx;/* height: 99px; */margin-bottom: 15px;display: flex;flex-wrap: wrap;margin-top: 20rpx;}.video_box{margin-right: 20rpx;margin-top: 20rpx;}.video_image image{width: 200rpx;height: 200rpx;margin-top: 20rpx;margin-left: 10rpx;}.Voice_box{display: flex;align-items: center;flex-wrap: wrap;margin-top: 15px;padding-bottom: 15px;}.videoshow{border: 1rpx solid #cccccc;width: 200rpx;height: 200rpx;/* margin:8px 10px; *//* position: relative; */}.videoConten{display: flex;align-items: center;}.showvideo{width: 200rpx;height: 200rpx;}.videBtn{position: fixed;bottom: 20rpx;left: 50%;transform:translateX(-50%);width: 200rpx;height: 200rpx;border-radius:50%;font-size: 35rpx;color:green ;text-align: center;line-height: 190rpx;border: 7rpx solid green;background:rgba(0,0,0,0);z-index: 11111;padding: 0;margin: 0;}.progressStyle{position: fixed;top: 0rpx;left: 0rpx;z-index: 111111;width: 100%;}

js部分

//在script标签最前面声明拍摄视频需要的apiconst recorderManager = uni.getRecorderManager();const innerAudioContext = uni.createInnerAudioContext('myAudio');innerAudioContext.autoplay = true;//录制视频startstartShootVideo() {let index = 0;let that = thisthis.timer=setInterval(() => { //注意箭头函数！！if(that.deflautWidth !=100){index += 1;that.deflautWidth = index}if (that.deflautWidth == 100) {clearInterval(this.timer);}}, 100);console.log("========= 调用开始录像 ===========")this.cameraContext = uni.createCameraContext();this.cameraContext.startRecord({success: res => {console.log("录像成功")console.log(res)}});},stopShootVideo() {//   console.log("========= 调用结束录像 ===========")this.cameraContext = uni.createCameraContext();this.cameraContext.stopRecord({success: res => {console.log('结束videoSrc')this.videoSrc.push(res.tempVideoPath)console.log(this.videoSrc)this.hidden = falsethis.showvideoimage = true}});},// //touch start 手指触摸开始handleTouchStart(e){    this.starttime  =  e.timeStamp;    console.log(" startTime = "  +  e.timeStamp);  console.log(" 手指触摸开始 " ,  e);  console.log(" this " , this);  },//touch end 手指触摸结束handleTouchEnd(e){    clearInterval(this.timer);this.endtime  =  e.timeStamp;    this.stopShootVideo();// console.log(" endTime = "  +  e.timeStamp);  console.log(" 手指触摸结束 ", e);//判断是点击还是长按 点击不做任何事件，长按 触发结束录像if (this.endtime - this.starttime > 350) {//长按操作 调用结束录像方法this.stopShootVideo();}this.showProgress = falsethis.hidden = truethis.showvideoimage = true},// /**//  * 长按按钮 - 录像//  */handleLongPress(e){console.log("endTime - startTime = "  +  (this.endtime  -  this.starttime));console.log("长按");// 长按方法触发，调用开始录像方法this.startShootVideo();},showvideo(){this.hidden = truethis.showProgress = true// this.showvideoimga = true},//录制视频end

uni-app实现微信小程序长按拍视频的功能相关推荐

uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
微信小程序有自己封装好的我们直接拿过来用就可以了接下来我们看看如何实现的吧上传图片功能效果如下: 单图上传 Page({/*** 页面的初始数据*/data: {imgList: "& ...
记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...
uniapp开发APP和微信小程序——使用高德实现定位
在uniapp官网中明确说了可以使用高德地图来实现APP和微信小程序的定位. 在dcloud社区里大佬已经给出了实现方法(链接:uni-app 中使用微信小程序第三方 SDK 及资源汇总 - DClo ...
微信小程序长按保存图片
微信小程序长按保存图片 wxml部分 <image data-url="{{item}}" bindlongtap="longPressSaveImg " ...
python人脸检测与微信小程序_python+requests对app和微信小程序进行接口测试
对于web端和app端的接口测试来说,他们都是通过请求方法,url和传递的body参数进行接口请求,区别web和app的区别就是header请求的不同.不同的地方在于header中的User-Agen ...
python+requests对app和微信小程序进行接口测试
对于web端和app端的接口测试来说,他们都是通过请求方法,url和传递的body参数进行接口请求,区别web和app的区别就是header请求的不同.不同的地方在于header中的User-Agen ...
python扫描app接口_[分享】python+requests对app和微信小程序进行接口测试
对于web端和app端的接口测试来说,他们都是通过请求方法,url和传递的body参数进行接口请求,区别web和app的区别就是header请求的不同.不同的地方在于header中的User-Agen ...

uni-app实现微信小程序长按拍视频的功能

html

css样式

js部分

uni-app实现微信小程序长按拍视频的功能相关推荐

最新文章

热门文章