如何在不改变宽高比的情况下调整视频大小？

Posted 2023-03-15

【中文标题】如何在不改变宽高比的情况下调整视频大小？

【英文标题】：How to resize video without changing it's aspect ratio?

【发布时间】：2019-01-30 05:54:55

【问题描述】：

  constructor(props) 
    super(props);
    this.state = 
        screenWidth: Dimensions.get('window').width,
        heightScaled: null,
    ;  
     

<View style=styles.videoView>
       <Video 
          source=video
          ref=(ref) =>  this.player = ref   
          repeat=true
          resizeMode="contain"
          style=
              width: this.state.screenWidth,
              height: this.state.heightScaled,
           
          onLoad=response => 
                const  width, height  = response.naturalSize;
                const heightScaled = height * (this.state.screenWidth / width);

                response.naturalSize.orientation = "horizontal";
                this.setState( heightScaled: heightScaled );
          
       />
</View>

样式

videoView: 
  flex: 1,
  width: Dimensions.get('window').width,
  height: 350

我正在从 api 获取视频，然后使用 react-native-video 在视频组件中使用它。我不知道如何在不拉伸视频的情况下调整视频大小以适应视图。

这是上面代码的结果。

我不希望我的视频越过我在图片中标记的红线。 请帮我。过去 3 天我一直被这个问题困扰。

【问题讨论】：

必须尝试将您的视频组件包装在 View 中并为其指定宽度和高度？

@warl0ck 我试过了。没用。

我也是react-native-video的新手

也许按照@warl0ck 的建议，使用posterResizeMode 或resizeMode 道具，其值为“cover” npmjs.com/package/react-native-video#posterresizemode npmjs.com/package/react-native-video#resizemode

检查View是否在没有Video组件的情况下不超过红线，确保不是View问题

【参考方案1】：

在包含<Video />的父<View />中再添加一个<View />将解决视频溢出问题。

<View style=styles.videoView>
  <Video
    resizeMode="contain"
    style=
      flex: 1
    
  />
  <View style=flex: 1>
     /* Components after red line can be rendered here */
  </View>
</View>