博客

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标签最前面声明拍摄视频需要的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