微信小程序 - Video 视频组件实现自定义封面 / 播放按钮 / 封面图描述文字 （轮子示例）

效果图

大概就是如下图所示效果，可根据需求自行修改。

实现思路

注：微信已实现同层渲染，请将 cover-view 替换为 view 。

首先，在 video 标签中添加 view 或 cover-view 标签，然后各功能实现思路如下：

---

• 【自定义封面】：封面图可直接设置 video 组件的 poster 属性。
• 【自定义按钮】：在 view 容器里套图像标签后设置 css 定位即可。
• 【封面图文字】：在 view 容器里套文字标签后设置 css 定位即可。

最后，给自定义按钮绑定点击事件，触发事件后隐藏最外层 view，给 video 绑定 bindended 事件设置最外层 view 显示。

源码

下面贴出源代码，可直接使用或封装成组件，根据自身需求来修改。

wxml：

<video id="myVideo" src="{{videoSrc}}" enable-danmu controls show-fullscreen-btn show-center-play-btn="{{false}}" auto-pause-if-navigate auto-pause-if-open-native show-play-btn object-fit="fill" bindpause="bindpause" bindended="bindended" >
  <cover-view class="video_cover" wx:if="{{isShow}}" bindtap="bindplay">
    <cover-image src="{{videoCoverImg}}" mode="widthFix"></cover-image>
    <cover-image src="{{videoPlayIcon}}" mode="widthFix" class="video_play_icon"></cover-image>
    <cover-view class="video_bg_black">
      <cover-view class="video_cover_txt">
        <cover-view>
          <cover-view class="video_txt">免费开通VIP</cover-view>
          <cover-view class="video_txt">最新影片等你来！</cover-view>
        </cover-view>
        <cover-image src="{{videoLockIcon}}" class="video_icon_lock" mode="widthFix"></cover-image>
      </cover-view>
    </cover-view>      
  </cover-view>
</video>

wxss：

.video_cover{
  width:100%;
  height:100%;
  position:relative;
}
.video_play_icon{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:40px;
  height:40px;
  z-index:5
}
.video_bg_black{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,.5);
}
.video_cover_txt{
  display:flex;
  justify-content: flex-end;
  align-items: center;
  text-align:right;
  color: #fff;
  font-size: 28rpx;
  margin-top: 35rpx;
  height: 90rpx;
}
.video_icon_lock{
  width:30rpx;
  height: auto;
  margin:0 30rpx;
}
.video_txt{
  margin:10rpx auto;
}

js：

Page({

  data: {
      isShow:true,
      videoSrc:'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',   // 视频
      videoCoverImg:'http://img5.imgtn.bdimg.com/it/u=1672477765,2527992874&fm=26&gp=0.jpg',   // 视频封面图
      videoPlayIcon:'http://39.105.134.221:8080/test/source1.png',  // 视频播放icon
      videoLockIcon:'http://39.105.134.221:8080/test/source2.png',   // 视频播放锁
  },
  
  onReady: function () {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  
  // 点击封面自定义播放按钮时触发
  bindplay() {
    this.setData({
      isShow:false
    })
    this.videoContext.play()
    console.log('play')
  },
  
  // 监听播放到末尾时触发
  bindended(){
    console.log('bindended')
    this.setData({
      isShow: true
    })
    this.videoContext.ended();
  },
  
  // 监听暂停播放时触发
  bindpause(){
    console.log('pause')
  }
  
})