无法在 Android 设备上以 react-native 显示视频文件

Question

我有以下问题。我尝试使用 react-native-video 组件在 android 设备上的 react-native 应用程序运行中显示扩展名为 *.mp4 的视频文件。

我设法引用了这个视频，我可以听到视频文件中的声音，但我不知道如何显示实际的视频图像。

这是我的这个组件的代码

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
var Video = require('react-native-video').default;

class VideoScene extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Video
          style={styles.backgroundVideo}
          repeat
          resizeMode='cover'
          source={require('../assets/SampleVideo.mp4')}
        />
     </View>
    );
  }
};

// Later on in your styles..           
var styles = StyleSheet.create({
container: {
  flex: 1,
},
backgroundVideo: {
  position: 'absolute',
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
 },
});


export default VideoScene;

我猜样式有问题，但不知道是哪一个。

感谢您suggestions/help可以帮助解决这个问题。

Answer 1

当您使用绝对样式时，您必须提供宽度和高度，因为它不会像 flex 那样自适应。

我猜你也希望它是全屏的。在这种情况下，您需要屏幕尺寸：

render() {
    const w = Dimensions.get('window').width;
    const h = Dimensions.get('window').height;
    return (
        <View style={styles.container}>
            <Video
                style={[styles.backgroundVideo, {width: w, height: h}]}
                repeat
                resizeMode='cover'
                source={require('../assets/SampleVideo.mp4')}
        />
        </View>
    );
}

无法在 Android 设备上以 react-native 显示视频文件

Can't display video file in react-native on Android device

react-native

android-videoview

react-native-android