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

作者：知新_RL | 2024-05-04 14:22:01

踩

22video.cover

效果图展示：

实现方法：

在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" bindende

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/534827

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

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