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

本文实例为大家分享了uni-app实现微信小程序长按拍视频功能的具体代码，供大家参考，具体内容如下html!--上传视频--viewclass=Voice_input...

本文实例为大家分享了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" 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=www.cppcns.com"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;
  widjavascriptth: 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。