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

如何解决如何在 React Native 中播放本地 mp4 视频

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

导出 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',height: "50%"
  },});

解决方法

尝试使用像素值：

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

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

,

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

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

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

},});