1. 首頁 > 生活百科 > >

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

生活百科

在微信小程序中實現視頻的播放與暫停需求：

  • 視頻列表中只能有一個視頻在播放
  • 點擊視頻實現播放與暫停功能
  • 加載完成顯示圖片，點擊后變為視頻播放
  • 從上次播放的位置進行播放
思路：
  • 定義一個標記變量，控制視頻的播放與暫停
    • true => 本次問播放
    • false => 本次為暫停
  • 每次點擊后，更新data中視頻的id值
  • 聲明一個數組，用于存放播放視頻的id和播放時間
    【微信小程序中視頻的顯示與隱藏】{vid:xxx,currentTime:xxx}
事件的流程圖
微信小程序中視頻的顯示與隱藏

文章插圖
代碼實現：靜態
<!-- 使用scroll-view組件 --><scroll-view class="scroll_video" enable-flex scroll-y><view class="scroll_videoList_item" wx:for="{{videoList}}" wx:key="index"><!-- 注意這個id是標簽屬性，點擊視頻標簽，事件的回調 event屬性會獲取到這個id值item.data.vid == vid => 點擊獲取到idbindtimeupdate：視頻的進度條發生變化時觸發通過event.detail.currentTime獲取播放的時間(詳見官網)--><videosrc="https://www.huyubaike.com/biancheng/{{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><!-- 視頻加載的時候使用圖片代替，點擊時切換為視頻 --><imageid="{{item.data.vid}}"class="scroll_img_item"src="https://www.huyubaike.com/biancheng/{{item.data.coverUrl}}"bindtap="clickVideo"wx:else></image></view></scroll-view>邏輯：
//頁面中使用到的數據data: {// 保存點擊的nav idclickId: '',// 保存視頻的數據videoList: [],// 保存點擊的視頻的idvid: '',// 控制視頻是否播放isPlay: true,//為true =>這一次為播放,為false => 這一次為暫停},//視頻的播放與暫停 clickVideo(event) {// 獲取用戶點擊視頻的id// console.log(event.currentTarget.id);let vid = event.currentTarget.id// 創建視頻的上下文與video組件進行一一關聯if (!this.player) {// 沒有視頻的上下文，創建一個this.player = wx.createVideoContext(vid)// 播放視頻this.player.play()// 存儲這次點擊的視頻的idthis.setData({vid})} else {// 有視頻上下文了if (vid != this.data.vid) {// 說明再次點擊的是其他的視頻// 暫停上一個視頻 -> 創建一個新的視頻上下文 -> 播放這個視頻this.player.pause()this.player = wx.createVideoContext(vid)this.player.play()this.setData({isPlay: true,//只要id不同，都是暫停上一次，播放這一次!!!vid})} else {// 說明第二次點擊的是正在播放的視頻if(this.data.isPlay){// 上一次的為播放，這一次需要暫停this.player.pause()// 修改狀態this.setData({isPlay:false,})}else {// 上一次為暫停，這一次需要播放this.player.play()this.setData({isPlay:true,})}}}},// 視頻播放的時間handlerUpdate(event) {const { videoUpdataTime } = this.data// 定義一個存儲視頻id和時間的對象const updateTime = {vid: event.currentTarget.id,currentTime: event.detail.currentTime,}// 如果數組里有時間，則更新時間，如果沒有事件，則添加這個對象let updateItem = videoUpdataTime.find(item => item.vid == updateTime.vid)if (updateItem) {// 有，更新時間updateItem.currentTime = event.detail.currentTime} else {// 沒有，添加整個對象videoUpdataTime.push(updateTime)}// 更新數據this.setData({videoUpdataTime,})},總結：
  • 沒有思路的時候 ， 可以畫一個流程圖 ， 不要空想
  • 多看文檔！多看文檔！多看文檔！重要的事情說三遍
  • 需要注意的是 ， 如果在微信開發者工具中測試有bug，但是代碼檢查不出問題，試試真機測試，會有意想不到的結果

    推薦閱讀