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

版权声明：111 https://blog.csdn.net/qq_42897782/article/details/87888642

微信小程序视频标签是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;    
}