关于微信亮厅小程序把video固定在页面顶端的问题,解决方案如下:
1.video fixed布局会造成:视频移动,黑色底留下
2.flex布局,video固定高度,自适应部分用scroll-view, 代码如下:晌稿
…
.grid-box{
width: 100%
height: 100%
display: flex
flex-direction: column
}
.grid-const{width: 750rpxheight: 422rpx}
.grid-var{flex: 1}
.content{height: 100%}
以上代码可以满足需求,但是下拉页面,video还是会跟着移动
3.最终解决宴键孝方案,禁止页面Page滚动:
在json配置文件中添加:“disableScroll”:true
经测试,页面效果和腾讯视频一致。
您好!很高兴能为您解答,在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素。
<video id="videoID"webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"x5-video-player-type="h5"x5-video-player-fullscreen="true"width="100%" height="100%"preload="auto" poster=""没裤 src="">谈察谨
</video>
还有个问题,在android的微信里面,就算加上了上面的属性,还会出现上下有黑边,不能全屏的问题。
解决办法:给含基video加上object-fit: fill的style属性。
因为微信小程序的图片image有默认的宽高:width: 320px和height: 240px,所以只设置宽度100%是无效的,因为图片高度默认240px
只需要添加属性 mode="者慎widthFix"
<image class="img" src="../images/1.png" mode="widthFix">
设置宽首耐敬度100%,
.img{width: 100%}
这样就可以实亩悉现图片宽度100%高度自适应,图片不会拉伸
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)