itsnubix / react-native-video-controls

A React Native video component with controls
MIT License
638 stars 527 forks source link

How can I set width & height for video? #153

Open vinc-labs opened 5 years ago

vinc-labs commented 5 years ago

I'm facing a problem, when i set width & height like that: <VideoPlayer source={{uri: src}} resizeMode={resizeMode} style={{width: 400, height: 250}} /> It's not working, just play a audio but not show a video. So, where is I wrong? I try to use videoStyle props but also not working. Can anyone tell me about different between style and videoStyle please??? Sorry, my English is not good! I'm using react-native 0.59, react-native-video 4.4.4 and react-native-video-controls 2.2.3

MaxKoldun commented 5 years ago

I've used a View component as a wrapper

<View style={{position: 'absolute', width: '100%', height: '100%'}}>
  <VideoPlayer />
</View>
vinc-labs commented 5 years ago

I've used a View component as a wrapper ...

Thank you @MaxKoldun ! Then, i got an error like that: Screenshot_20190925-101545_AidaSchool

I don't know it's happen before or when, can you help me?

MaxKoldun commented 5 years ago

Oops, @vinc-labs i forgot to add StyleSheet:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
    player : {
        position        : 'absolute',
        height          : '100%',
        width           : '100%'
    }
});
<View style={styles.player}>
  <VideoPlayer />
</View>
vinc-labs commented 5 years ago

Oops, @vinc-labs i forgot to add StyleSheet:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
    player : {
        position        : 'absolute',
        height          : '100%',
        width           : '100%'
    }
});
<View style={styles.player}>
  <VideoPlayer />
</View>

Thanks! Let's me try...

vinc-labs commented 5 years ago

@MaxKoldun Thank you very much bro... I have one more problem, that is when video is loading and I press home button, it will auto play even when in background.. So, Are you knowledgeable about this?

MaxKoldun commented 5 years ago

you have to add componentWillUnmount to the component where your player is being used when you leave the player page componentWillUnmount will disable your player

     state = {isOpen: false}
     onHandleOpen = () => this.setState({isOpen: true});
    componentWillUnmount() {
               this.setState({isOpen: false});
    }
{ isOpen
? <View style={styles.player}>
  <VideoPlayer />
</View>
: null
}
    <Button
      title="Open"
      onPress={onHandleOpen}
    />
vinc-labs commented 5 years ago

@MaxKoldun I think when pressing home button it's not fired willUnmount??

vinc-labs commented 5 years ago

@MaxKoldun bug Invariant Violation above seems appear when I click very fast with links to change other video. I'm not sure

jrhager84 commented 2 years ago

I cannot disable native iOS controls without getting that bug invariant error. Is anybody else getting that, and how did you overcome it? Thanks!