uni-app实现微信小程序长按拍视频功能_javascript技巧_

                       上传视频:                                                                                                                                                                                                                                                                                                                                                   按住拍                                                                                                     

/* 上传视频 */     .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%;     }

//在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