微信小程序 自定义视频封面图

微信小程序视频标签是video

video组件API：https://developers.weixin.qq.com/miniprogram/dev/component/video.html

wx.createVideoContext()   API：                         https://developers.weixin.qq.com/miniprogram/dev/api/wx.createVideoContext.html?search-key=wx.createVideoContext

video默认封面为灰色，这就需要自己给它加上封面图,我是通过tab_image来控制封面图是否显示，当点击播放时，给tab_image赋值为none,然后通过做id绑定视频，让视频播放。

.wxml

.js

  
// 点击cover播放
  videoPlay: function (e) {
    console.log('点击播放');
    console.log(e);
    //隐藏封面图和播放图标
    this.setData({
      tab_image: "none"    //tab_image 来控制封面图 
    }),
    this.videoCtx.play();
  },
  onReady() {
    this.videoCtx = wx.createVideoContext('myVideo')  //根据id绑定
  },

.wxss

.videoStyle{ width:100%; height:450rpx;}
.controls{ z-index:1; top:148rpx;}
.play{ 
    /* position:absolute; */
    left:50%;
    margin-top:-291rpx;
    margin-left:-80rpx;    
}