快捷導(dǎo)航

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

更新時(shí)間：2022年10月11日 11:39:39 作者：hello-old-gang

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

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

需求：

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

思路：

定義一個(gè)標(biāo)記變量，控制視頻的播放與暫停
true => 本次問播放
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ā)
			通過event.detail.currentTime獲取播放的時(shí)間(詳見官網(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>

邏輯：

 //頁面中使用到的數(shù)據(jù)
data: {
    // 保存點(diǎn)擊的nav id
    clickId: '',
    // 保存視頻的數(shù)據(jù)
    videoList: [],
    // 保存點(diǎn)擊的視頻的id
    vid: '',
    // 控制視頻是否播放
    isPlay: true,   //為true =>這一次為播放,為false => 這一次為暫停
  },
      
  //視頻的播放與暫停
 clickVideo(event) {
    // 獲取用戶點(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) {
      // 沒有視頻的上下文，創(chuàng)建一個(gè)
      this.player = wx.createVideoContext(vid)
      // 播放視頻
      this.player.play()
      // 存儲(chǔ)這次點(diǎn)擊的視頻的id
      this.setData({
        vid
      })
    } else {
      // 有視頻上下文了
      if (vid != this.data.vid) {
        // 說明再次點(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 {
        // 說明第二次點(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í)間的對象
    const updateTime = {
      vid: event.currentTarget.id,
      currentTime: event.detail.currentTime,
    }
    // 如果數(shù)組里有時(shí)間，則更新時(shí)間，如果沒有事件，則添加這個(gè)對象
    let updateItem = videoUpdataTime.find(item => item.vid == updateTime.vid)
    if (updateItem) {
      // 有，更新時(shí)間
      updateItem.currentTime = event.detail.currentTime
    } else {
      // 沒有，添加整個(gè)對象
      videoUpdataTime.push(updateTime)
    }
    // 更新數(shù)據(jù)
    this.setData({
      videoUpdataTime,
    })
  },