uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能
本文實(shí)例為大家分享了uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能的具體代碼,供大家參考,具體內(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)擊還是長(zhǎng)按 點(diǎn)擊不做任何事件,長(zhǎng)按 觸發(fā)結(jié)束錄像 ?? ??? ??? ??? ?if (this.endtime - this.starttime > 350) { ?? ??? ??? ??? ??? ?//長(zhǎng)按操作 調(diào)用結(jié)束錄像方法 ?? ??? ??? ??? ??? ?this.stopShootVideo(); ?? ??? ??? ??? ?} ?? ??? ??? ??? ?this.showProgress = false ?? ??? ??? ??? ?this.hidden = true ?? ??? ??? ??? ?this.showvideoimage = true ?? ??? ??? ?}, ?? ??? ??? ?// /** ?? ??? ??? ?// ?* 長(zhǎng)按按鈕 - 錄像 ?? ??? ??? ?// ?*/ ?? ??? ??? ?handleLongPress(e){ ?? ??? ??? ? ?console.log("endTime - startTime = " ?+ ?(this.endtime ?- ?this.starttime)); ?? ??? ??? ? ?console.log("長(zhǎng)按"); ?? ??? ??? ? ?// 長(zhǎng)按方法觸發(fā),調(diào)用開始錄像方法 ?? ??? ??? ? ?this.startShootVideo(); ?? ??? ??? ?}, ?? ??? ??? ?showvideo(){ ?? ??? ??? ? ?this.hidden = true ?? ??? ??? ? ?this.showProgress = true ?? ??? ??? ? ?// this.showvideoimga = true ?? ??? ??? ? ?? ??? ??? ?}, ?? ??? ??? ?//錄制視頻end
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)放大鏡效果代碼示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)放大鏡效果代碼示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04JavaScript高級(jí)函數(shù)應(yīng)用之分時(shí)函數(shù)實(shí)例分析
這篇文章主要介紹了JavaScript高級(jí)函數(shù)應(yīng)用之分時(shí)函數(shù),結(jié)合實(shí)例形式分析了javascript通過合理分時(shí)函數(shù)應(yīng)用避免瀏覽器卡頓或假死的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例,也可說是一個(gè)JS實(shí)現(xiàn)的小人走動(dòng)小游戲,需要的朋友可以參考下2014-08-08JS實(shí)現(xiàn)簡(jiǎn)單的浮動(dòng)碰撞效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的浮動(dòng)碰撞效果,類似于廣告懸浮圖片在屏幕上來回碰撞的效果,涉及javascript結(jié)合時(shí)間動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2017-12-12textContent在Firefox下與innerText等效的屬性
textContent在Firefox下與innerText等效的屬性...2007-05-05