国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

微信小程序?qū)崿F(xiàn)抖音視頻效果教程

這篇具有很好參考價(jià)值的文章主要介紹了微信小程序?qū)崿F(xiàn)抖音視頻效果教程。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

當(dāng)我們進(jìn)行開發(fā)的時(shí)候可能會(huì)遇到需要實(shí)現(xiàn)抖音視頻效果的需求,并且網(wǎng)上該效果的開源代碼少,找到的開源代碼代碼量大,很難進(jìn)行二次開發(fā)

對(duì)此我將自己的代碼進(jìn)行簡(jiǎn)化,僅留下可動(dòng)性高的代碼模塊
微信小程序教程,微信小程序如何實(shí)現(xiàn)抖音視頻效果
以上是實(shí)現(xiàn)效果與此處demo的模板

wxml文件:

<swiper vertical="true" bindchange="nextVideo">
  <swiper-item wx:for="{{viList}}">
    <video loop="true" enable-progress-gesture="true"	object-fit="contain" src="{{item.vio}}" id="video{{index}}" />  
    <view class="video-right">
      <view class="video-right-img" style="margin-bottom: 10rpx; background-image: url({{item.avatar}})" data-user_id="{{item.user_id}}" bindtap="toOtherUser"></view>
        點(diǎn)贊 評(píng)論 轉(zhuǎn)發(fā)    </view>
    <view class="video-btm">
      <view class="video-btm-con">
        <text>@{{item.name}}</text><text>\t創(chuàng)建時(shí)間</text>
        <view>標(biāo)題</view>
      </view>
    </view>
  </swiper-item></swiper>


wxss文件:

page{
  background-color: #000;}
 swiper{
  height: 100vh;
  width: 100vw;}
 swiper video{
  height: 100vh;
  width: 100%;}
 .video-right{
  height: 38vh;
  width: 80rpx;
  position: fixed;
  right: 15rpx;
  top: 50vh;
  color: #fff;}
 .video-right-img{
  height: 80rpx;
  width: 80rpx;
  border-radius: 100rpx;
  background-color: aquamarine;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;}
 .video-btm{
  height: 180rpx;
  width: 100vw;
  position: fixed;
  bottom: 0;
  color:#fff;}
 .video-btm-con{
  width: 90vw;
  margin: 0 auto;}


js文件:文章來源地址http://www.zghlxwxcb.cn/news/detail-521378.html

// pages/index5/index5.jsPage({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    viList:[
      {
        vio:'https://assets.mixkit.co/videos/preview/mixkit-movement-in-a-large-avenue-at-night-in-timelapse-44688-large.mp4',
        avatar:'https://profile-avatar.yssmx.com/6ef2193c2e9649c88356336c626e5777_m0_64944135.jpg',
        name:'xiaoshen'
      },
      {
        vio:'https://assets.mixkit.co/videos/preview/mixkit-movement-in-a-large-avenue-at-night-in-timelapse-44688-large.mp4',
        avatar:'	https://profile.yssmx.com/7/A/9/1_2201_75886543',
        name:'kami'
      }
    ]
  },
 
  onLoad(options) {
    // 調(diào)用播放視頻方法
    this.startUp()
  },
 
  // 進(jìn)頁(yè)面時(shí)播放視頻
  startUp(){
    // 獲取video節(jié)點(diǎn)
    let createVideoContext = wx.createVideoContext('video0')
    // 播放視頻
    createVideoContext.play()
  },
 
  // 切換視頻的時(shí)候播放視頻
  // 注:此方法視頻如果過大可能會(huì)疊音,所以視頻需要壓縮,或者可以嘗試循環(huán)節(jié)點(diǎn)關(guān)閉視頻
  nextVideo(e){
    // 播放當(dāng)前頁(yè)面視頻
    let index = 'video' + e.detail.current    this.playVio(index)
    // 暫停前一個(gè)頁(yè)面視頻
    if(e.detail.current-1 >= 0){
      let index1 = 'video' + (e.detail.current-1)
      this.pauseVio(index1)
    }
    // 暫停后一個(gè)頁(yè)面視頻
    if(e.detail.current+1 < this.data.viList.length){
      let index2 = 'video' + (e.detail.current+1)
      this.pauseVio(index2)
    }
  },
 
  // 播放視頻
  playVio(index){
    // 獲取video節(jié)點(diǎn)
    let createVideoContext = wx.createVideoContext(index)
    // 播放視頻
    createVideoContext.play()
  },
 
  // 暫停視頻
  pauseVio(index){
    // 獲取video節(jié)點(diǎn)
    let createVideoContext = wx.createVideoContext(index)
    // 暫停視頻
    createVideoContext.pause()
  }})

到了這里,關(guān)于微信小程序?qū)崿F(xiàn)抖音視頻效果教程的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 技術(shù)分享| 小程序?qū)崿F(xiàn)音視頻通話

    技術(shù)分享| 小程序?qū)崿F(xiàn)音視頻通話

    上一期我們把前期準(zhǔn)備工作做完了,這一期就帶大家實(shí)現(xiàn)音視頻通話! 為了更好的區(qū)分功能,我分成了六個(gè) js 文件 config.js 音視頻與呼叫邀請(qǐng)配置 store.js 實(shí)現(xiàn)音視頻通話的變量 rtc.js 音視頻邏輯封裝 live-code.js 微信推拉流狀態(tài)碼 rtm.js 呼叫邀請(qǐng)相關(guān)邏輯封裝 util.js 其他方法

    2024年02月02日
    瀏覽(24)
  • 微信小程序 - 超詳細(xì) “純前端“ 將文件上傳到阿里云 OSS,最新阿里云 OSS 直傳音視頻、圖片、word、excel、ppt、office 文檔(全程無需后端,前端文件直傳阿里云oss服務(wù)器)

    微信小程序 - 超詳細(xì) “純前端“ 將文件上傳到阿里云 OSS,最新阿里云 OSS 直傳音視頻、圖片、word、excel、ppt、office 文檔(全程無需后端,前端文件直傳阿里云oss服務(wù)器)

    網(wǎng)上的教程亂七八糟卻文件少代碼(并且沒注釋),而且都已經(jīng)很老了,對(duì)于新手來說真的無從下手。 本文站在新手小白的角度, 實(shí)現(xiàn)微信小程序開發(fā)中,“前端直傳” 上傳文件到阿里云oss對(duì)象存儲(chǔ)的詳細(xì)教程, 無需后端 (純前端自己完成所有簽名、上傳),保證 100% 成

    2024年02月13日
    瀏覽(120)
  • 【聲網(wǎng)】實(shí)現(xiàn)web端與uniapp微信小程序端音視頻互動(dòng)

    【聲網(wǎng)】實(shí)現(xiàn)web端與uniapp微信小程序端音視頻互動(dòng)

    利用聲網(wǎng)實(shí)現(xiàn)音視頻互動(dòng) 注冊(cè)聲網(wǎng)賬號(hào) 進(jìn)入Console 成功登錄控制臺(tái)后,按照以下步驟創(chuàng)建一個(gè)聲網(wǎng)項(xiàng)目: 展開控制臺(tái)左上角下拉框,點(diǎn)擊 創(chuàng)建項(xiàng)目 按鈕。 在彈出的對(duì)話框內(nèi),依次選擇 項(xiàng)目類型 ,輸入 項(xiàng)目名稱 ,選擇 場(chǎng)景標(biāo)簽 和 鑒權(quán)機(jī)制 。其中鑒權(quán)機(jī)制推薦選擇 安全

    2024年04月27日
    瀏覽(53)
  • 《保姆級(jí)教程》基于Agora SDK實(shí)現(xiàn)音視頻通話及屏幕共享

    《保姆級(jí)教程》基于Agora SDK實(shí)現(xiàn)音視頻通話及屏幕共享

    ??作者簡(jiǎn)介: 小曾同學(xué).com,一個(gè)致力于測(cè)試開發(fā)的博主??,主要職責(zé):測(cè)試開發(fā)、CI/CD 如果文章知識(shí)點(diǎn)有錯(cuò)誤的地方,還請(qǐng)大家指正,讓我們一起學(xué)習(xí),一起進(jìn)步。?? 座右銘:不想當(dāng)開發(fā)的測(cè)試,不是一個(gè)好測(cè)試??。 如果感覺博主的文章還不錯(cuò)的話,還請(qǐng)點(diǎn)贊、收藏哦

    2024年02月12日
    瀏覽(21)
  • 保姆級(jí)教程!基于聲網(wǎng) Web SDK實(shí)現(xiàn)音視頻通話及屏幕共享

    保姆級(jí)教程!基于聲網(wǎng) Web SDK實(shí)現(xiàn)音視頻通話及屏幕共享

    本篇文章主要給小伙伴們分享如何使用聲網(wǎng) SDK 實(shí)現(xiàn) Web 端音視頻通話及屏幕共享功能,其中也會(huì)涵蓋在實(shí)踐過程中遇到的一些問題,以此記錄防止小伙伴們踩坑,同時(shí)也希望通過從 0 到 1 實(shí)戰(zhàn)的分享,能夠幫助更多的小伙伴。

    2024年02月16日
    瀏覽(28)
  • 小程序選擇圖片音視頻的方法chooseMedia

    小程序選擇圖片音視頻的方法chooseMedia

    前幾天寫了一個(gè)方法,目的是去更換頭像,如微信里的更換頭像。 頁(yè)面如上圖,點(diǎn)擊后觸發(fā)事件,打開存放圖像的文件,選擇想更換的圖像。 視圖頁(yè):image src=\\\"{ {imgUrl}}\\\" mode=\\\"aspectFill\\\" bindtap=\\\"changeAvatar\\\"/image imgUrl是圖片所在的路徑; mode是圖片的模式; 綁定的點(diǎn)擊(tap),觸發(fā)的

    2024年02月10日
    瀏覽(16)
  • 音視頻開發(fā) RTMP協(xié)議發(fā)送H.264編碼及AAC編碼的音視頻(C++實(shí)現(xiàn))

    音視頻開發(fā) RTMP協(xié)議發(fā)送H.264編碼及AAC編碼的音視頻(C++實(shí)現(xiàn))

    RTMP(Real Time Messaging Protocol)是專門用來傳輸音視頻數(shù)據(jù)的流媒體協(xié)議,最初由Macromedia 公司創(chuàng)建,后來歸Adobe公司所有,是一種私有協(xié)議,主要用來聯(lián)系Flash Player和RtmpServer,如 FMS , Red5 , crtmpserver 等。RTMP協(xié)議可用于實(shí)現(xiàn)直播、點(diǎn)播應(yīng)用,通過 FMLE(Flash Media Live Encoder) 推送音

    2023年04月08日
    瀏覽(30)
  • Android程序員向音視頻進(jìn)階,有前景嗎

    Android程序員向音視頻進(jìn)階,有前景嗎

    隨著移動(dòng)互聯(lián)網(wǎng)的普及和發(fā)展,Android開發(fā)成為了很多人的就業(yè)選擇,希望在這個(gè)行業(yè)能獲得自己的一席之地。然而,隨著時(shí)間的推移,越來越多的人進(jìn)入到了Android開發(fā)行業(yè),就導(dǎo)致目前Android開發(fā)的工作越來越難找,內(nèi)卷非常嚴(yán)重,最近聽說音視頻開發(fā)是Android未來的一個(gè)出口

    2023年04月24日
    瀏覽(57)
  • 抖音上怎么掛小程序?制作小程序掛載抖音視頻

    抖音上怎么掛小程序?制作小程序掛載抖音視頻

    公司企業(yè)商家現(xiàn)在已經(jīng)把抖音作為營(yíng)銷的渠道之一,目前抖音支持短視頻掛載小程序,可方便做營(yíng)銷。以下給大家分享這一操作流程。 一、申請(qǐng)自主掛載能力 首先需要在抖音開放平臺(tái)官網(wǎng)注冊(cè)一個(gè)抖音小程序賬號(hào),然后申請(qǐng)短視頻自主掛載能力。 二、搭建小程序 你需要有一

    2024年02月08日
    瀏覽(20)
  • 使用Python采集某網(wǎng)站視頻,實(shí)現(xiàn)音視頻自動(dòng)合成!

    使用Python采集某網(wǎng)站視頻,實(shí)現(xiàn)音視頻自動(dòng)合成!

    ? 開發(fā)環(huán)境 模塊的使用 采集下破站視頻數(shù)據(jù) 通過開發(fā)者工具進(jìn)行抓包分析,分析破站視頻數(shù)據(jù)的來源。 開發(fā)者工具的使用 打開方式: 鼠標(biāo)右鍵點(diǎn)擊檢查選擇Network F12 ctrl + shift + i 想要開發(fā)者工具中有數(shù)據(jù)加載, 需要 刷新網(wǎng)頁(yè)。 通過元素(Element)面板,我們能查看到想抓取

    2024年02月06日
    瀏覽(16)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包