微信小程序 - video组件poster无效 / 视频播放列表

　　在做有关微信小程序有关视频播放页面的时候，遇到video组件设置poster无效果，然后查了下poster属性：视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效。按他的意思做在编辑器上还算是没效果。仔细观察了下编辑器上貌似是视频的第一帧；但是在手机上测试封面可以显示。本来想搞两个页面，一个列表，一个详情。但是客户就需要一个视频列表，还提出播放图标难看，本身我用的默认的播放图标，直接上源码吧。。。

  
    
      
      
      
    

    
      
    

    
      
        {{item.title}}
      
      
        
      
      

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}

 

效果如下：

如有更好的方法，欢迎分享

转载于:https://www.cnblogs.com/changxue/p/9381110.html