2022/04/24 微信小程序自定义封面效果

目标效果
自定义播放按钮放在视频中间控制视频播放

遇到问题
1.我的播放图片按钮是透明的，挡不住下面视频自带的播放按钮

2.隐藏中间按钮可以解决视频自带的中间播放按钮不显示，但是poster的封面效果就不起作用了

解决方法
思路：用cover-view做整个的覆盖层当成封面图，再用个cover-img做定位按钮
还要结合微信程序video的API，中间播放按钮这些需要隐藏
最后的实现效果

demo代码
html

 <view class="video-box">
            <video id="video" style="height:100%;width:100%;" src="https://summit-img.geekpark.net/frontier-weapp/前沿社会员采访2020.mp4" object-fit="fill" show-mute-btn="true" title="前沿社会员采访" bindpause="pauseVideo" bindended="endedVideo">
              <cover-view class="video_cover" bindtap="playVideo" wx:if="{{!videoStarted}}">
                <cover-image src="{{videoPosterImg}}" mode="widthFix">
                </cover-image>
                <cover-image src="{{videoPlayIcon}}" mode="widthFix" class="video_play_icon"></cover-image>
              </cover-view>
            </video>
          </view>

js

data: {
    videoStarted: false, //手动点击 视频未播放
   
    videoPosterImg: "//封面图片",
    videoPlayIcon: ""播放按钮图片
  },
  
//播放视频
  playVideo: function () {
    var videoContext = wx.createVideoContext('video')
    videoContext.play()
    this.setData({
      videoStarted: true
    })
    // console.log('palyplay')
  },

  //暂停视频
  pauseVideo: function () {
    this.setData({
      videoStarted: false
    })
    // console.log('pause')
  },

  //视频结束
  endedVideo: function () {
    // console.log('bindended')
    this.setData({
      videoStarted: false
    })
    // this.videoContext.ended();
  },

  //页面滚动(这里是wxml中使用了scroll-view组件，当页面滚动视频也会关闭)
  handleScroll: function () {
    var videoContext = wx.createVideoContext('video')
    videoContext.pause()
  },
//=======其实video组件应该在这里声明，下面用this.videoContext来调用，但我会报错
// onReady() {
  //   this.videoContext = wx.createVideoContext('video')
  // },

wxss

 .video-box {
  width: 95vw;
  height: 54vw;
  /* outline: 1px solid red; */
}

/* 视频封面 */
.video-box .video_cover {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 视频播放按钮 */
 .video-box .video_cover .video_play_icon {
  /* outline: 1px solid red; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  z-index: 5
}

---

参考链接
1.这个demo就是没有封面图效果，但是作者有小程序代码片段看效果
https://blog.csdn.net/z291493823/article/details/122049886

2.我主要是照这个改的，重点是使用cover-view
https://blog.csdn.net/qq_43447509/article/details/107822675?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&utm_relevant_index=1

tips
定位的时候要看清楚父子元素，我定位反正关系没搞清，结果视频在小程序上划不动了