This article shares the specific code for uni-app to implement the video function of long pressing and shooting in WeChat applets for your reference. The specific content is as follows
html
<!-- Upload video --> <view class="Voice_input"> <text class="Voice_title">Upload video:</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/" @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" >Press and hold to shoot</text> </view> </view> </view> </view> </view>
css style
/* Upload video */
.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 part
//Declare the API required to shoot videos in front of the script tag const recorderManager = ();
const innerAudioContext = ('myAudio');
= true;
//Record video start startShootVideo() {
let index = 0;
let that = this
=setInterval(() => { //Note the arrow function! ! if( !=100){
index += 1;
= index
}
if ( == 100) {
clearInterval();
}
}, 100);
("========= Call to start recording ===========")
= ();
({
success: res => {
("Video recording successfully")
(res)
}
});
},
stopShootVideo() {
// ("============= The call ends the recording ============================) = ();
({
success: res => {
('End videoSrc')
()
()
= false
= true
}
});
},
// //touch start touch start handleTouchStart(e){
= ;
(" startTime = " + );
("Finger touch begins" , e);
(" this " , this);
},
//touch end finger touch end handleTouchEnd(e){
clearInterval();
= ;
();
// (" endTime = " + );
("Finger touch ends", e);
//Judge whether to click or long press. Click without doing any event. Press and hold to trigger the end of the recording. if ( - > 350) {
//Long press and call the end recording method ();
}
= false
= true
= true
},
// /**
// * Press and hold the button - Video
// */
handleLongPress(e){
("endTime - startTime = " + ( - ));
("Long press");
// Long press the method to trigger it, and call the start recording method ();
},
showvideo(){
= true
= true
// = true
},
//Record videoendThe above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.