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

最新推荐文章于 2024-08-05 11:03:57 发布

柠檬不萌只是酸i

最新推荐文章于 2024-08-05 11:03:57 发布

阅读量6.5k

点赞数 2

分类专栏：微信小程序文章标签：自定义播放按钮、自定义封面图

本文链接：https://blog.csdn.net/Miss_liangrm/article/details/103779498

版权

本文介绍了如何在微信小程序中实现video组件的自定义播放按钮、封面图片以及封面上的文案。通过在video上覆盖cover-view和cover-image元素，结合CSS布局和事件监听，可以创建个性化的视频播放体验。当点击播放按钮后，封面和按钮会隐藏，视频开始播放；视频结束后，恢复封面和按钮显示。

摘要由CSDN通过智能技术生成

效果图展示：

实现方法：

在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&