video宽高按照等比设置(方案4完美解决)

需求：移动端的video，宽度是屏幕宽度，宽高需要按照x:y的这种比例设置，但是宽是变化的，随着手机屏幕的宽度变化而变化，而高度设置成宽度乘以百分比的值

方案1，适用移动端

实现：在css3中，原本有vw和vh两种单位,1vw则为屏幕宽度的1%px，1vh为屏幕视口高度的1%px，可以用 (x/y)*vw 设置高度
另外，也有vmin和vmax两种单位,这个取决于屏幕高度和宽度哪个更大或者更小

image.png

方案2 PC端(不太喜欢，而且对于video标签好像没生效？或者说效果不如意)

image.png

方案3 (简单粗暴，很有效，但兼容性极差)

原文链接： https://cloud.tencent.com/developer/article/1609830
试了一下在新版的chorme浏览器里是可以的
使用aspect-ratio属性

image.png

方案4 (完美方案,PC端也可以使用)

使用AutoSizer组件。

import {AutoSizer} from 'react-virtualized';

react-virtualized 里面有很多虚拟滚动的组件，但是这里只用这一个AutoSizer

 <AutoSizer style={{position:'relative',width: '100%',height:'auto' }}>
    {({ height, width }) => (
        <video src={xxx} style={{width, height: width*3/4}}/>
    )}
  </AutoSizer>

这样子就可以让video的高度变成宽度的3/4，而且支持自适应父容器的变化