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" 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
