CODEWITHSUNDEEP
javascriptreactjsreact-nativeecmascript-6react-native-video
Abhigyan Gaurav
Abhigyan Gaurav

Reputation: 1904

how to play local mp4 video in react native

Here In my code I am trying to play video from my local . I have stored one mp4 video in my code file. I have imported it where I have to play it . I am passing correct value but video is not coming on screen . Only on blank screen is coming .

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%"
  },
});

Upvotes: 0

Views: 7532

Answers (2)

Ruban Dharmaraj
Ruban Dharmaraj

Reputation: 1205

you can use react-native-video package to play local or uri video file

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

const styles = StyleSheet.create({ VideoBG: { position: 'absolute', width: 150, height: 300

}, });

Upvotes: 1

Stefan
Stefan

Reputation: 260

Try using values in pixels:

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

as well as adding top: 0or bottom: 0 style since the position that you are using is absolute

Upvotes: 0

Related Questions