微信小程序——video使用總結

關於小程序video的一些基本使用方法，可點擊這裏稍做了解。

 

需求：

1.默認顯示封面；

2.一個視頻播放的時候，其餘視頻中止播放，並顯示封面。

 

解決問題思路：

1.經過wx:if判斷當前視頻是不是播放的狀態，若是是就顯示視頻，若是不是就隱藏視頻；

2.點擊封面的時候，獲取到該視頻的id，進行判斷，若是當前沒有視頻播放，就把該視頻設置爲播放的狀態；若是當前有視頻播放，則中止當前播放的視頻，再播放你點擊的這個視頻。

 

具體實施方案：

wxml:

<view wx:for="{{courseList}}" wx:for-item="course" class='course-pannle-item' wx:for-index="idx">
  <view class='video-item'>
    <video wx:if='{{idx==playIndex}}' id='video{{idx}}' autoplay='{{true}}' show-center-play-btn="{{false}}" src='{{course.videoUrl}}' controls="true" objectFit="cover">
    </video>
    <image class='video-cover' wx:if='{{idx!=playIndex}}' mode='widthFix' src='{{course.coverUrl}}'></image>
    <image class='video-play-btn' wx:if='{{idx!=playIndex}}' mode='widthFix' data-index='{{idx}}' bindtap='videoPlay' src='/images/play.png'></image>
    <text wx:if='{{idx!=playIndex}}' class='video-duration fs-28'>{{course.duration}}</text>
  </view>
</view>

 

js:

//獲取應用實例
var app = getApp();


Page({

  /**
   * 頁面的初始數據
   */
  data: {
    playIndex: null,//用於記錄當前播放的視頻的索引值
    courseList: [{
      videoUrl: '',//視頻路徑
      coverUrl: '/images/course.png', //視頻封面圖
      duration: '03:00', //視頻時長
    }, {
      videoUrl: '',
      coverUrl: '/images/course.png',
      duration: '04:45',
    }]
  },
  videoPlay: function (e) {
    var curIdx = e.currentTarget.dataset.index; 
    // 沒有播放時播放視頻
    if (!this.data.playIndex) {
      this.setData({
        playIndex: curIdx
      })
      var videoContext = wx.createVideoContext('video' + curIdx) //這裏對應的視頻id
      videoContext.play()
    } else { // 有播放時先將prev暫停，再播放當前點擊的current
      var videoContextPrev = wx.createVideoContext('video' + this.data.playIndex)
      if (this.data.playIndex != curIdx) {
        videoContextPrev.pause()
      }
      this.setData({
        playIndex: curIdx
      })
      var videoContextCurrent = wx.createVideoContext('video' + curIdx)
      videoContextCurrent.play()
    }
  }
})

 

wxss:

.video-item{
  position: relative;
  width: 100%;
  height: 420rpx;
}
video{
  width: 100%;
  height: 100%;
}
.video-cover{
  position: absolute;
  left: 0;
  top: 0
}
.video-play-btn{
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto
}
.video-duration{
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #fff;
}

 

說說遇到的問題：

1.視頻播放的時候，滑動頁面視頻會一直在那個位置不會跟着滾動條移動。

　　解決方法：不要將視頻放在scroll-view組件裏面。官網裏面也有講到。我本身粗心沒注意到這個問題。

 

 

2.視頻播放的時候，會擋住底部的tab導航。

　　解決方法：一開始底部導航是我自定義的一個模板。視頻層級是最高的，因此會一直顯示在最上面。最後只能用微信的tabbar,在app.json裏面配置。詳情點擊這裏。

　　　　　　　感受自定義的tabbar會方便許多，由於有時候底部tabbar的狀況會不同。若是哪位看官有解決視頻不會擋住自定義底部導航的方法，望不吝賜教了~~