最近在搞小程序，需要播放视频，但是视频封面得自定义图片。查找资料时候发现好多实现不了，要么就是看不懂。前段时间做了一个demo没注意真机测试，开发工具可以实现，但是手机上不显示图片，如果显示图片的话就会覆盖按钮，耽误了大家的时间深感抱歉，已经删除原文。最近修改实现后重新做了个demo记录一下方便以后需要的时候使用，也希望能帮助到更多的人。
一.先上开发工具和手机显示图片
开发者工具下的初始和播放暂停后截图：
*---------------------------------------------------
*----------------------------------------------------------------------------------------------------------------------------------
手机上的初始和播放暂停后的截图：
*---------------------------------------------------
肯定有人注意到了开发者工具暂停播放后按钮位置发生改变，但是在手机上测试的时候显示正常。主要还是为了手机上使用么。
以下为页面完整代码 ：
.xml代码
view class="video" video id="myVideo" class="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400}" 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; }.json配置就不展示了，不影响这个效果
本次实现的过程中参考了：实现思想链接
希望本文能帮助到你，如果有问题或者更好的效果请留言告知。谢谢！
再次为上一次发的没有真机测试过的demo抱歉。
