1

使用 expo-av 创建视频，我正在尝试使用 css 定位创建的视频。我想让视频高度：容器的 100%。但我不知道如何访问实际的视频，只知道容器。如何定位使用来自 expo-av 的 Video 对象（与 react-native-video 非常相似）创建的容器的子视频？

代码看起来像这样。

 <Video
   style={styles.video}
   ref={videoRef}
   source={post.media}
   resizeMode="cover" /* this actually does affect the video css but does not affect 
                      the height */
   onPlaybackStatusUpdate={status => setStatus(() => status)}
 />

const styles = StyleSheet.create({
  video: {
    width:200,
    height:200,
    objectFit:'cover'
  }
})

但是在 web 视图中生成的（缩写的）代码看起来像这样。

<div style="height:200px;width:200px;object-fit:cover">
  <video style="object-fit:cover" src=[..videosrc]></video>
</div>

请注意，视频本身的 css 不是目标。

编辑

这实际上解决了使视频 100% 使用其外部容器的短期问题，但并没有解决学习如何为视频本身添加样式的长期问题。弄清楚如何定位子 css 的主要原因是将来可能会有其他样式专门添加到视频中，而不仅仅是高度。非常感谢任何想法。

const styles = StyleSheet.create({
  video: {
    width:200,
    height:200,
    objectFit:'cover',
    display: 'flex',
    align-items: 'flex-end'
  }
})
4

0 回答 0