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

发布时间:2021-05-28 11:53:06 作者:小新
来源:亿速云 阅读:819

这篇文章给大家分享的是有关微信小程序中video视频如何实现自定义播放按钮、封面图、视频封面上文案的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

效果图展示:  

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

实现方法:

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

感谢各位的阅读!关于“微信小程序中video视频如何实现自定义播放按钮、封面图、视频封面上文案”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. 微信小程序开发视频
  2. 微信小程序如何停止其他视频播放当前视频

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

微信小程序 video

上一篇:CSS如何实现圆形缩放动画

下一篇:PHP如何配合fiddler抓包抓取微信指数小程序数据

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》