快捷導(dǎo)航

uni-app實(shí)現(xiàn)微信小程序長按拍視頻功能

更新時間：2022年08月28日 09:06:46 作者：紅豆O(∩_∩)O

這篇文章主要為大家詳細(xì)介紹了uni-app實(shí)現(xiàn)微信小程序長按拍視頻功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了uni-app實(shí)現(xiàn)微信小程序長按拍視頻功能的具體代碼，供大家參考，具體內(nèi)容如下

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標(biāo)簽最前面聲明拍攝視頻需要的api
?? ?const recorderManager = uni.getRecorderManager();
?? ?const innerAudioContext = uni.createInnerAudioContext('myAudio');
?? ?innerAudioContext.autoplay = true;
?? ?//錄制視頻start
?? ??? ??? ?startShootVideo() {
?? ??? ??? ??? ?let index = 0;
?? ??? ??? ??? ?let that = this
?? ??? ??? ??? ?this.timer=setInterval(() => { //注意箭頭函數(shù)??！
?? ??? ??? ??? ??? ?if(that.deflautWidth !=100){
?? ??? ??? ??? ??? ??? ?index += 1;
?? ??? ??? ??? ??? ??? ?that.deflautWidth = index
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if (that.deflautWidth == 100) {
?? ??? ??? ??? ??? ??? ?clearInterval(this.timer);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}, 100);
?? ??? ??? ??? ?console.log("========= 調(diào)用開始錄像 ===========")
?? ??? ??? ??? ?this.cameraContext = uni.createCameraContext();
?? ??? ??? ??? ?this.cameraContext.startRecord({
?? ??? ??? ??? ??? ?success: res => {
?? ??? ??? ??? ??? ??? ?console.log("錄像成功")
?? ??? ??? ??? ??? ??? ?console.log(res)
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?});
?? ??? ??? ?},
?? ??? ??? ?stopShootVideo() {
?? ??? ??? ??? ?// ? console.log("========= 調(diào)用結(jié)束錄像 ===========")
?? ??? ??? ??? ?this.cameraContext = uni.createCameraContext();
?? ??? ??? ??? ?this.cameraContext.stopRecord({
?? ??? ??? ??? ??? ?success: res => {
?? ??? ??? ??? ??? ??? ?console.log('結(jié)束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 手指觸摸結(jié)束
?? ??? ??? ?handleTouchEnd(e){ ? ?
?? ??? ??? ??? ?clearInterval(this.timer);
?? ??? ??? ??? ?this.endtime ?= ?e.timeStamp; ? ?
?? ??? ??? ??? ?this.stopShootVideo();
?? ??? ??? ??? ?// console.log(" endTime = " ?+ ?e.timeStamp); ?
?? ??? ??? ??? ?console.log(" 手指觸摸結(jié)束 ", e);
?? ??? ??? ??? ?//判斷是點(diǎn)擊還是長按 點(diǎn)擊不做任何事件，長按 觸發(fā)結(jié)束錄像
?? ??? ??? ??? ?if (this.endtime - this.starttime > 350) {
?? ??? ??? ??? ??? ?//長按操作 調(diào)用結(jié)束錄像方法
?? ??? ??? ??? ??? ?this.stopShootVideo();
?? ??? ??? ??? ?}
?? ??? ??? ??? ?this.showProgress = false
?? ??? ??? ??? ?this.hidden = true
?? ??? ??? ??? ?this.showvideoimage = true
?? ??? ??? ?},
?? ??? ??? ?// /**
?? ??? ??? ?// ?* 長按按鈕 - 錄像
?? ??? ??? ?// ?*/
?? ??? ??? ?handleLongPress(e){
?? ??? ??? ? ?console.log("endTime - startTime = " ?+ ?(this.endtime ?- ?this.starttime));
?? ??? ??? ? ?console.log("長按");
?? ??? ??? ? ?// 長按方法觸發(fā)，調(diào)用開始錄像方法
?? ??? ??? ? ?this.startShootVideo();
?? ??? ??? ?},
?? ??? ??? ?showvideo(){
?? ??? ??? ? ?this.hidden = true
?? ??? ??? ? ?this.showProgress = true
?? ??? ??? ? ?// this.showvideoimga = true
?? ??? ??? ?
?? ??? ??? ?},
?? ??? ??? ?//錄制視頻end

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: