微信小程序 video 组件高度自适应实现

偶然发现微信小程序的 video 无法像 Image 对象那样设置 mode='widthFix' 实现宽度100% 高度自适应

尝试了各种网上的方案都不可行。

要实现高度自适应需要2个条件:

• 知道视频的真实宽，高
• 设置 css 的 aspect-ratio 与 height

在小程序内上传视频 调用 wx.chooseMedia 获取视频的宽高信息：

Taro.chooseMedia(）

在 success 回调内获取到

{
      tempFilePath
      size:
      duration
      height
      width
      thumbTempFilePath
      fileType

在非上传接口中可以通过 video 组件的 bindloadedmetadata 事件回调内获取到视频相应的宽与高

将相关信息保存下来，比如存入名为 media 的对象中

接下来要在展示的 video 组件上设置两个 css 属性

• aspect-ratio

• height

以 Taro 中使用为例：

<Video
          object-fit="contain"
          style={styleObject}
        ></Video>

styleObject 对象计算如下：

styleObject = {aspectRatio: `${media.width} / ${media.height}`, height: `${media.width / media.height * 100}%`}

以我现实项目中的例子为例, 最后得到的相应 css 值为：

aspect-ratio: 720 / 1280;
height: 56.25%;

注意

1、单独设置以上两个属性的任意一个都不起作用

2、如果是在小程序开发工具中测试会发现，你获取不到视频的宽与高

注：转载请注明出处博客园：王二狗Sheldon池中物 ([email protected])