如何在 React Native 中播放本地 mp4 视频答案

【问题标题】：how to play local mp4 video in react native如何在 React Native 中播放本地 mp4 视频
【发布时间】：2021-08-06 11:31:59
【问题描述】：

在我的代码中，我试图从本地播放视频。我在我的代码文件中存储了一个 mp4 视频。我已经将它导入到我必须播放的地方。我传递了正确的值，但屏幕上没有视频。只有在空白屏幕上来了。

export const TRAININGVIDEO = require('./tutorialvid.mp4')

import Video from 'react-native-video';
import { TRAININGVIDEO, USER_LOGIN } from '../../images';

const deviceHeight = Dimensions.get('window').height;


export default class TrainingAndGuide extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoading: false,
      title: "Training Guide Video",
      icon: 'settings',
      iconType: 'MaterialCommunityIcons',
    }
  }

  render() {
    const { updateResponse, navigation, trainigVideos } = this.props;
    const { title, icon, modalVisible } = this.state;
    return (
      <ImageBackground source={BG} style={{ width: '100%', height: '100%' }} resizeMode="cover">
        <View>
          <Header title={title} icon={icon} navigation={navigation} />
        </View>
      
          <View style={{
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#fff',
            width: "100%",
            height: '50%'
          }}>

            <Video source={{ TRAININGVIDEO }}   // Can be a URL or a local file.
              ref={(ref) => {
                this.player = ref
              }}         
                                         // Store reference
              onBuffer={this.onBuffer}                // Callback when remote video is buffering
              onError={this.videoError}               // Callback when video cannot be loaded
              style={styles.backgroundVideo} />

          </View>
       
      </ImageBackground>

    )


  }
}

var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    width: "100%",
    height: "50%"
  },
});

【问题讨论】：

你试过<Video source={TRAININGVIDEO} （一对{}，不是2个）
不，我没试过 1 对让我试试谢谢

标签： javascript reactjs react-native ecmascript-6 react-native-video

【解决方案1】：

尝试使用像素值：

var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    width: "150px",
    height: "300px"
  },
});

以及添加top: 0或bottom: 0样式，因为您使用的position是absolute

【讨论】：

【解决方案2】：

您可以使用 react-native-video 包播放本地或 uri 视频文件

https://www.npmjs.com/package/react-native-video

const 样式 = StyleSheet.create({ 视频背景：{ 位置：'绝对'，宽度：150，高度：300

}, });

【讨论】：