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);//判斷是點擊還是長按 點擊不做任何事件，長按 觸發(fā)結束錄像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("長按");// 長按方法觸發(fā)，調用開始錄像方法this.startShootVideo();},showvideo(){this.hidden = truethis.showProgress = true// this.showvideoimga = true},//錄制視頻end

總結

以上是生活随笔為你收集整理的uni-app实现微信小程序长按拍视频的功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。