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

这篇文章主要讲解了“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如何实现微信小程序长按拍视频功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！