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
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。