欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年08月28日 09:06:46   作者:紅豆O(∩_∩)O  
這篇文章主要為大家詳細(xì)介紹了uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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)放大鏡效果代碼示例

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)放大鏡效果代碼示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-04-04
  • JavaScript高級(jí)函數(shù)應(yīng)用之分時(shí)函數(shù)實(shí)例分析

    JavaScript高級(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-08
  • JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例

    JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例,也可說是一個(gè)JS實(shí)現(xiàn)的小人走動(dòng)小游戲,需要的朋友可以參考下
    2014-08-08
  • JS實(shí)現(xiàn)簡(jiǎn)單的浮動(dòng)碰撞效果示例

    JS實(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-12
  • pace.js頁(yè)面加載進(jìn)度條插件

    pace.js頁(yè)面加載進(jìn)度條插件

    在頁(yè)面中引入 Pace.js 和您所選擇主題的 CSS 文件,就可以讓你的頁(yè)面擁有漂亮的加載進(jìn)度和 Ajax 導(dǎo)航效果。不需要掛接到任何代碼,自動(dòng)檢測(cè)進(jìn)展。您可以選擇顏色和多種效果,有簡(jiǎn)約,閃光燈,MAC OSX,左側(cè)填充,頂部填充,計(jì)數(shù)器和彈跳等等。
    2015-09-09
  • js繪制一條直線并旋轉(zhuǎn)45度

    js繪制一條直線并旋轉(zhuǎn)45度

    這篇文章主要為大家詳細(xì)介紹了js繪制一條直線并旋轉(zhuǎn)45度,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • webpack之引入圖片的實(shí)現(xiàn)及問題

    webpack之引入圖片的實(shí)現(xiàn)及問題

    如果我們希望在頁(yè)面引入圖片。當(dāng)我們基于webpack進(jìn)行開發(fā)時(shí),引入圖片會(huì)遇到一些問題,這篇文章主要介紹了webpack之引入圖片的實(shí)現(xiàn)及問題,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2018-10-10
  • D3.js實(shí)現(xiàn)繪制和弦圖的教程詳解

    D3.js實(shí)現(xiàn)繪制和弦圖的教程詳解

    弦圖,是一種表示實(shí)體之間相互關(guān)系的圖形方法。這篇文章主要為大家詳細(xì)介紹了如何通過D3.js實(shí)現(xiàn)繪制和弦圖,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)D3.js有一定的幫助,需要的可以參考一下
    2022-11-11
  • textContent在Firefox下與innerText等效的屬性

    textContent在Firefox下與innerText等效的屬性

    textContent在Firefox下與innerText等效的屬性...
    2007-05-05
  • uniapp在微信小程序中圖片寬度顯示問題示例代碼

    uniapp在微信小程序中圖片寬度顯示問題示例代碼

    在uniapp中,如果你的富文本圖片顯示寬度不正常,你可以通過設(shè)置圖片的寬高屬性來解決這個(gè)問題,這篇文章主要介紹了uniapp在微信小程序中圖片寬度顯示問題,需要的朋友可以參考下
    2023-02-02

最新評(píng)論