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

微信小程序中視頻的顯示與隱藏功能

 更新時(shí)間:2022年10月11日 11:39:39   作者:hello-old-gang  
這篇文章主要介紹了微信小程序中視頻的顯示與隱藏,思路大概是定義一個(gè)標(biāo)記變量,控制視頻的播放與暫停,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

在微信小程序中實(shí)現(xiàn)視頻的播放與暫停

需求:

  • 視頻列表中只能有一個(gè)視頻在播放
  • 點(diǎn)擊視頻實(shí)現(xiàn)播放與暫停功能
  • 加載完成顯示圖片,點(diǎn)擊后變?yōu)橐曨l播放
  • 從上次播放的位置進(jìn)行播放

思路:

  • 定義一個(gè)標(biāo)記變量,控制視頻的播放與暫停
  • true => 本次問(wèn)播放
  • false => 本次為暫停
  • 每次點(diǎn)擊后,更新data中視頻的id值
  • 聲明一個(gè)數(shù)組,用于存放播放視頻的id和播放時(shí)間
 {
      vid:xxx,
      currentTime:xxx  
  }

事件的流程圖

代碼實(shí)現(xiàn):

靜態(tài)

<!-- 使用scroll-view組件 -->  
<scroll-view class="scroll_video" enable-flex scroll-y>
    <view class="scroll_videoList_item" wx:for="{{videoList}}" wx:key="index">
      <!-- 注意這個(gè)id是標(biāo)簽屬性,
        點(diǎn)擊視頻標(biāo)簽,事件的回調(diào) event屬性會(huì)獲取到這個(gè)id值
        item.data.vid == vid => 點(diǎn)擊獲取到id
		bindtimeupdate:視頻的進(jìn)度條發(fā)生變化時(shí)觸發(fā)
			通過(guò)event.detail.currentTime獲取播放的時(shí)間(詳見(jiàn)官網(wǎng))
       -->
      <video 
        src="{{item.data.urlInfo.url}}" 
        id="{{item.data.vid}}" 
        class="scroll_video_item" 
        wx:if="{{vid == item.data.vid ? isPlay? true : false :false}}"
        bindtap="clickVideo"
        poster="{{item.data.coverUrl}}"
        bindtimeupdate="handlerUpdate"
      ></video>
      <!-- 視頻加載的時(shí)候使用圖片代替,點(diǎn)擊時(shí)切換為視頻 -->
      <image 
        id="{{item.data.vid}}" 
        class="scroll_img_item" 
        src="{{item.data.coverUrl}}" 
        bindtap="clickVideo"
        wx:else
      ></image>
    </view>
  </scroll-view>

邏輯:

 //頁(yè)面中使用到的數(shù)據(jù)
data: {
    // 保存點(diǎn)擊的nav id
    clickId: '',
    // 保存視頻的數(shù)據(jù)
    videoList: [],
    // 保存點(diǎn)擊的視頻的id
    vid: '',
    // 控制視頻是否播放
    isPlay: true,   //為true =>這一次為播放,為false => 這一次為暫停
  },
      
  //視頻的播放與暫停
 clickVideo(event) {
    // 獲取用戶(hù)點(diǎn)擊視頻的id
    // console.log(event.currentTarget.id);
    let vid = event.currentTarget.id
    // 創(chuàng)建視頻的上下文與video組件進(jìn)行一一關(guān)聯(lián)
    if (!this.player) {
      // 沒(méi)有視頻的上下文,創(chuàng)建一個(gè)
      this.player = wx.createVideoContext(vid)
      // 播放視頻
      this.player.play()
      // 存儲(chǔ)這次點(diǎn)擊的視頻的id
      this.setData({
        vid
      })
    } else {
      // 有視頻上下文了
      if (vid != this.data.vid) {
        // 說(shuō)明再次點(diǎn)擊的是其他的視頻
        // 暫停上一個(gè)視頻 -> 創(chuàng)建一個(gè)新的視頻上下文 -> 播放這個(gè)視頻
        this.player.pause()
        this.player = wx.createVideoContext(vid)
        this.player.play()
        this.setData({
          isPlay: true,//只要id不同,都是暫停上一次,播放這一次!!!
          vid
        })
      } else {
        // 說(shuō)明第二次點(diǎn)擊的是正在播放的視頻
        if(this.data.isPlay){
          // 上一次的為播放,這一次需要暫停
          this.player.pause()
          // 修改狀態(tài)
          this.setData({
            isPlay:false,
          })
        }else {
          // 上一次為暫停,這一次需要播放
          this.player.play()
          this.setData({
            isPlay:true,
          })
        }
      }
    }
  },
      
  // 視頻播放的時(shí)間
  handlerUpdate(event) {
    const { videoUpdataTime } = this.data
    // 定義一個(gè)存儲(chǔ)視頻id和時(shí)間的對(duì)象
    const updateTime = {
      vid: event.currentTarget.id,
      currentTime: event.detail.currentTime,
    }
    // 如果數(shù)組里有時(shí)間,則更新時(shí)間,如果沒(méi)有事件,則添加這個(gè)對(duì)象
    let updateItem = videoUpdataTime.find(item => item.vid == updateTime.vid)
    if (updateItem) {
      // 有,更新時(shí)間
      updateItem.currentTime = event.detail.currentTime
    } else {
      // 沒(méi)有,添加整個(gè)對(duì)象
      videoUpdataTime.push(updateTime)
    }
    // 更新數(shù)據(jù)
    this.setData({
      videoUpdataTime,
    })
  },

總結(jié):

  • 沒(méi)有思路的時(shí)候,可以畫(huà)一個(gè)流程圖,不要空想 ??
  • 多看文檔!多看文檔!多看文檔!重要的事情說(shuō)三遍
  • 需要注意的是,如果在微信開(kāi)發(fā)者工具中測(cè)試有bug,但是代碼檢查不出問(wèn)題,試試真機(jī)測(cè)試,會(huì)有意想不到的結(jié)果 ??

到此這篇關(guān)于微信小程序中視頻的顯示與隱藏的文章就介紹到這了,更多相關(guān)微信小程序顯示與隱藏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論