• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序之video组件与cover-view组件和cover-image组件灵活应用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言:最近忙着赶项目,没时间更博;希望和大家一起学习一起进步。

本人遇到的坑,以及爬出坑的方法:在某个微信小程序项目中,有这样一个需求:在滑块swiper组件和swiper-item组件中嵌套video,然后自定义一个播放的按钮替换默认的播放按钮和位置(我开始用的方法是用相对定位,把图片直接定位在视频的中央地方,问题就出现了,由于文档已经给了提示,最好不要在滑块swiper组件和swiper-item组件中嵌套video,所以,最后导致,第一个滑块可以正常看到播放按钮,其他的则不行,会随着滑块滑动而隐藏其他的播放按钮(因为微信小程序video的z-idnex是最高级的),后来度娘说用组件cover-view或cover-image组件可以实现覆盖在video,上,果然,显示是可以了,但是,播放按钮的位置漂浮不定,根本不能满足需求;后来灵感一来,发现,把video组件和image组件放在两个view组件里,用相对定位,然后把video的z-index设置为-1;image的z-index大于1就行,然后就解决了。实现滑块滑动,播放按钮稳稳的跟着视频滑动)

 

wxml代码:(主要看结构)

<swiper >
<swiper-item wx:for="{{antHomeData}}" wx:key="" class="swiper-cnt">
<view class="video-cnt">
<video  src="{{item.adUrl}}"></video>
</view>
<image  class="play-btn" src="/images/bf.png"></image>
</swiper-item>
</swiper>
wxss代码:
.swiper-cnt {
display: flex;
flex-direction: column;
width:664rpx;
margin-left:40rpx;
position: relative;
}
.video-cnt {
position: absolute;
top:0;
left: 0;
z-index: -1!important;
width: 641rpx;
height: 465rpx;
}
.play-btn {
width: 70rpx;
height: 70rpx;
position: absolute;
top: 232.5rpx;
left: 320.5rpx;
margin: -35rpx 0 0 -35rpx;
z-index: 100;
}
.swiper-cnt .video-cnt video {
border-radius: 12rpx;
width: 100%;
height: 100%;
}

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序访问豆瓣电影api400错误解决方法发布时间:2022-07-18
下一篇:
原创:WeZRender:微信小程序Canvas增强组件发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap