微信小程序 - video組件poster無效 / 視頻播放列表

　　在作有關微信小程序有關視頻播放頁面的時候，遇到video組件設置poster無效果，而後查了下poster屬性：視頻封面的圖片網絡資源地址，若是 controls 屬性值爲 false 則設置 poster 無效。按他的意思作在編輯器上還算是沒效果。仔細觀察了下編輯器上貌似是視頻的第一幀；可是在手機上測試封面能夠顯示。原本想搞兩個頁面，一個列表，一個詳情。可是客戶就須要一個視頻列表，還提出播放圖標難看，自己我用的默認的播放圖標，直接上源碼吧。。。

<view wx:for="{{imgUrls}}" wx:key="index">
  
    <view class='videocover' data-id="{{index}}" bindtap='playbtn'
    wx:if="{{index == currentId ? false:true}}">
      <view class='videocoverbg'></view>
      <image src='../../image/play.png' class='playbtn'></image>
      <image src='{{item.cover}}' mode="widthFix" class='cover'></image>
    </view>

    <view wx:if="{{index == currentId ? true:false}}" >
      <video class='box-w block' src="{{item.video}}" show-center-play-btn="false" autoplay='{{index === currentId ? true:false}}' objectFit="cover" bindended="jieshu"></video>
    </view>

    <view class='has-padding-sm flex'>
      <view class='f15 flex-1 self-middle'>
        {{item.title}}
      </view>
      <view class='m-l10 self-middle'>
        <image src='../../image/share.png' class='ico-share'></image>
      </view>
    </view>  

</view>

Page({
  data: {
    imgUrls: [
      {
        "cover": "http://ozg6qzjmp.bkt.clouddn.com/spfm.jpg",
        "video": "http://ozg6qzjmp.bkt.clouddn.com/misu.mp4",
        "title":"標題1"
      },
      {
        "cover": "http://ozg6qzjmp.bkt.clouddn.com/spfm.jpg",
        "video": "http://ozg6qzjmp.bkt.clouddn.com/misu.mp4",
        "title": "標題2"
      },
      {
        "cover": "http://ozg6qzjmp.bkt.clouddn.com/spfm.jpg",
        "video": "http://ozg6qzjmp.bkt.clouddn.com/misu.mp4",
        "title": "標題3"
      },
      {
        "cover": "http://ozg6qzjmp.bkt.clouddn.com/spfm.jpg",
        "video": "http://ozg6qzjmp.bkt.clouddn.com/misu.mp4",
        "title": "標題3"
      }
    ]
  },
  onLoad: function (options) {
    
  },
  playbtn(e) {
    var currentId = e.currentTarget.dataset.id;
    this.setData({
      "currentId": currentId
    })
  },
  jieshu() {
    this.pausevideo()
  },
  onHide() {
    this.pausevideo()
  },
  onShow(){
    this.pausevideo()
  },
  pausevideo(){
    this.setData({
      "currentId": null
    })
  }
})

.videocover{ position:relative;width:100%;height:225px;overflow: hidden }
.videocoverbg{ position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.3) }
.playbtn{position:absolute;top:50%;z-index:2;left:50%; width:50px;height:50px;transform:translate(-50%,-50%)}
.videocover .cover{width:100%;}
.ico-share{ width:18px; height:18px; display: block}

 

效果以下：

若有更好的方法，歡迎分享