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

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

查看更多关于uni-app实现微信小程序长按拍视频功能的详细内容...