微信小程序视频标签是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
video show-center-play-btn='false' objectFit='cover' id="myVideo" class="videoStyle pr" src="{{videoDetail.path}}" /video !-- 视频-- view style="display: {{tab_image}};" cover-view class="controls pa" id="controls" !-- 视频 封面图片 -- cover-image src="{{videoDetail.thumb}}" style='height:455rpx;'/ /cover-view !-- 中间的播放图片标志 -- cover-view class="play pa" style="z-index:200;" bindtap="videoPlay" cover-image bindtap="bindplay" data-id="1" src="/images/icon/video.png" style="width:160rpx;"/ /cover-view /view.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; }
