微信小程序视频封面使用图片

最近在搞小程序，需要播放视频，但是视频封面得自定义图片。查找资料时候发现好多实现不了，要么就是看不懂。实现后做了个demo记录一下方便以后需要的时候使用，也希望能帮助到更多的人。
一、话不多说，先上效果截图：
播放前截图

播放后截图

估计你也不想听我讲解，那就直接上代码。（主要前端懂得不多）
以下为页面完整代码
.xml代码

  <view  class="video">
    <video id="myVideo" class="myVideo" bindplay="bindplay" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400}">
    </video>
    <view>
          <image class="model-img" style="display:{{videoimage}}" src="../../image/vedio_img.jpg"></image>
    </view>
  </view>

.js逻辑代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
    videoimage: "block" //默认显示封面
  },
  //点击播放按钮，封面图片隐藏
  bindplay: function (e) {
    this.setData({
      videoimage: "none"
    })
  },
})

.wxss样式代码

.myVideo{
    position: relative;
    width:100%;
    height: calc(9 * 750rpx / 16);
}
.model-img{
    width: 100%;
    position:absolute;
    top:0;
    height: calc(9 * 750rpx / 16);
}

.json配置就不展示了，不影响这个效果
弊端：暂停后展示的不是图片封面，有更好效果的麻烦底下代码留言。
谢谢，散场！