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如何實現微信小程序長按拍視頻功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！