微信小程序 video组件宽和高控制
发表人:金马 | 2022-04-11

做网页设计时各类浏览器的兼容问题导至让人崩溃,如当时的IE6,IE7,IE8,各类浏览器需要用不同样式去匹配,后来开发人员终于鼓起勇气不做IE兼容。

后来微软经过慎重考虑,终于在WIN10发布时,废掉IE浏览器,让系统自带EDGU浏览器,可能EDGU也是能和chrome媲美的浏览器,不过微软的IE浏览器口碑实在太差劲了,曾经IE浏览器时代后期,大部分市场给火狐占领,而现在基本给chrome占领。

而做小程序开发时,最让人恶心的就是苹果的刘海屏了,这绝对是反人类的设计,没有一点实用价值,还得让开发人员要去匹配样式。

微信小程序开发视屏组件时,这个满屏效果也是需要用WXSS样式去控制的,这个并不像HTML组件直接给定宽高或自动适应。

微信小程序vodeo组件只能通过WXSS去控制宽高,代码如下:

wxml代码:

<video id="myVideosrc="{{news_url}}" show-fullscreen-btn="falseobject-fit="" show-play-btn="{{true}}" poster="{{news_img}}"></video>

wxss代码:

#myVideo{

  position: absolute;

  width: 750rpx;

  height: 1196rpx;

  background: #cdcdcd;

  overflow: hidden;

  flex-direction:column;

  align-items:center;/*垂直居中*/

  justify-content: center;/*水平居中*/

  z-index: 1;

}

这样是以苹果6分辨率作为开发参考,如下图:

image.png

经过测试,以上效果在苹果六手机是没有问题的,但是在苹果11手机并不能实现自动适应,还是得加上js代码去控制才可以。

实现方法如下,

wxml代码:

<video id="myVideostyle="height:{{height}}px;class="goodsimg-infosrc="{{news_url}}" show-fullscreen-btn="trueshow-play-btn="{{true}}" poster="{{news_img}}"></video>

增加了变量height,用JS去控制高度。

js代码:

wx.getSystemInfo({

      success: function (res) {

        that.setData({

          height: res.windowHeight - 69,

        });

      }

    });
通过wx.getsysteminfo去取屏的高度,再减去顶部的标题栏,这样基本就能兼容所类手机,在苹果6手机和苹果11手机是没有全屏兼容的。

我来说两句(0)
:zui: :wink: :twisted: :roll: :oops: :mrgreen: :love: :lol: :jidong: :idea: :han:
发表评论(Ctrl+Enter)
—— 金马科技公众号 ——
十二年 行业积累

砥砺前行路上,有您关注,相聚相研共话成长!

如有意向,请与我们联系

办公电话:0774-3838278 / QQ:154727262 / 微信:wztmma