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

谁借莪１个温暖的怀抱￠ 2023-03-06 08:10 477阅读 0赞

## 效果图 ##

大概就是如下图所示效果，可根据需求自行修改。  
![在这里插入图片描述][20200806090527892.gif]

## 实现思路 ##

> 注：微信已实现同层渲染，请将 `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')
      }
      
    })

[20200806090527892.gif]: /images/20230208/3e7fb85982b04e91b077029713573580.png