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

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

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

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

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);
?? ??? ??? ??? ?//判斷是點擊還是長按 點擊不做任何事件,長按 觸發(fā)結束錄像
?? ??? ??? ??? ?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("長按");
?? ??? ??? ? ?// 長按方法觸發(fā),調用開始錄像方法
?? ??? ??? ? ?this.startShootVideo();
?? ??? ??? ?},
?? ??? ??? ?showvideo(){
?? ??? ??? ? ?this.hidden = true
?? ??? ??? ? ?this.showProgress = true
?? ??? ??? ? ?// this.showvideoimga = true
?? ??? ??? ?
?? ??? ??? ?},
?? ??? ??? ?//錄制視頻end

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • JavaScript實現(xiàn)放大鏡效果代碼示例

    JavaScript實現(xiàn)放大鏡效果代碼示例

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

    JavaScript高級函數應用之分時函數實例分析

    這篇文章主要介紹了JavaScript高級函數應用之分時函數,結合實例形式分析了javascript通過合理分時函數應用避免瀏覽器卡頓或假死的相關操作技巧,需要的朋友可以參考下
    2018-08-08
  • JavaScript實現(xiàn)的使用鍵盤控制人物走動實例

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

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

    JS實現(xiàn)簡單的浮動碰撞效果示例

    這篇文章主要介紹了JS實現(xiàn)簡單的浮動碰撞效果,類似于廣告懸浮圖片在屏幕上來回碰撞的效果,涉及javascript結合時間動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下
    2017-12-12
  • pace.js頁面加載進度條插件

    pace.js頁面加載進度條插件

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

    js繪制一條直線并旋轉45度

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

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

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

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

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

    textContent在Firefox下與innerText等效的屬性

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

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

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

最新評論