微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案

墨蓝 2023-06-26 10:37 22阅读 0赞

**效果图展示：  **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

**实现方法：**

**在video中添加一个cover-view，在cover-view写两个cover-image，一个用来存储封面图、一个用来存放播放按钮，同级写一个cover-view用来完成封面上的文字，设置绝对定位，水平垂直居中，在播放按钮上添加点击事件，点击之后隐藏cover-view，最后在监听视频结束事件，重新填充封面跟播放按钮就可以了。**

代码：

<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">1天1元，开通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>

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')
      }
    })

.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;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191231110128977.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70