今天分享一下如何在微信小程序的视频中添加封面图，自定义显示封面图对于用户体念来说是非常好的。

通过下面代码可以自定义封面图片和播放按钮。

前端代码.xml：

<view  class="video">
    <video id="myVideo" class="myVideo" src="视频地址" custom-cache="{{false}}">
    </video>
    <cover-view class="controls" style="display:{{tab_image}};">
    <cover-image src="../../image/vedio_img.jpg" />
    </cover-view>
    <cover-view class="play" style="display:{{tab_image}};z-index:200;">
    <cover-image bindtap="bindplay" src="../../image/paly.png" style="width:160rpx;" />
    </cover-view>
</view>

逻辑代码.js中加入：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    videoimage: "block" //默认显示封面
  },
  //点击播放按钮，封面图片隐藏,播放视频
  bindplay: function (e) {
    this.setData({
      tab_image: "none"
    }),
      this.videoCtx.play()
  },
  onReady() {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
})

样式代码在.wxss文件中加入：

.myVideo{ 
  width:100%;
  height: calc(9 * 750rpx / 16);
  background-color: #fff;
}
.controls{
  position:absolute;
  z-index:1; 
  background-color: #fff;    
   height: calc(9 * 750rpx / 16); 
  margin-top:-430rpx;
}
.play{ 
    position:absolute;
    left:50%;
    margin-top:-300rpx;
    margin-left:-80rpx;    
}

设置好就可以，自己定义封面图和播放按钮了。