这篇文章主要讲解了“uni-app如何实现微信小程序长按拍视频功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“uni-app如何实现微信小程序长按拍视频功能”吧!
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" ></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标签最前面声明拍摄视频需要的api const recorderManager = uni.getRecorderManager(); const innerAudioContext = uni.createInnerAudioContext('myAudio'); innerAudioContext.autoplay = true; //录制视频start startShootVideo() { let index = 0; let that = this this.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 = false this.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 = false this.hidden = true this.showvideoimage = true }, // /** // * 长按按钮 - 录像 // */ handleLongPress(e){ console.log("endTime - startTime = " + (this.endtime - this.starttime)); console.log("长按"); // 长按方法触发,调用开始录像方法 this.startShootVideo(); }, showvideo(){ this.hidden = true this.showProgress = true // this.showvideoimga = true }, //录制视频end
感谢各位的阅读,以上就是“uni-app如何实现微信小程序长按拍视频功能”的内容了,经过本文的学习后,相信大家对uni-app如何实现微信小程序长按拍视频功能这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。