Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

In full screen mode the video is cut of . How to solved it? please help me. #2035

Closed
TechAsif opened this issue Jun 4, 2020 · 8 comments
Closed

Comments

@TechAsif
Copy link

TechAsif commented Jun 4, 2020

Bug

I am happy with that only one issues cut of my video when i click full screen

Platform

Android

Which player are you experiencing the problem on:

  • Android ExoPlayer

Library version: "react-native-video": "^4.4.5",

##expected output:

Screenshot_1591267525

Current output

Screenshot_1591267606

How to achieve expected output when full screen.

code sample:

/*Example of React Native Video*/
import React, { Component } from 'react';
//Import React
import { Platform, StyleSheet, Text, View } from 'react-native';
//Import Basic React Native Component
import Video from 'react-native-video';
//Import React Native Video to play video
import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';
//Media Controls to control Play/Pause/Seek and full screen

class TestScreenVideo extends Component {
  videoPlayer;

  state = {
    currentTime: 0,
    duration: 0,
    isFullScreen: false,
    isLoading: true,
    paused: false,
    playerState: PLAYER_STATES.PLAYING,
    screenType: 'contain',
  };


  onSeek = seek => {
    //Handler for change in seekbar
    this.videoPlayer.seek(seek);
  };

  onPaused = playerState => {
    //Handler for Video Pause
    this.setState({
      paused: !this.state.paused,
      playerState,
    });
  };

  onReplay = () => {
    //Handler for Replay 
    this.setState({ playerState: PLAYER_STATES.PLAYING });
    this.videoPlayer.seek(0);
  };

  onProgress = data => {
    const { isLoading, playerState } = this.state;
    // Video Player will continue progress even if the video already ended
    if (!isLoading && playerState !== PLAYER_STATES.ENDED) {
      this.setState({ currentTime: data.currentTime });
    }
  };

  onLoad = data => this.setState({ duration: data.duration, isLoading: false });

  onLoadStart = data => this.setState({ isLoading: true });

  onEnd = () => this.setState({ playerState: PLAYER_STATES.ENDED });

  onError = () => alert('Oh! ', error);

  exitFullScreen = () => {
    alert('Exit full screen');
  };

  enterFullScreen = () => { };

  onFullScreen = () => {
    if (this.state.screenType == 'contain'){
      this.setState({ screenType: 'cover' });
    }
     
    else{
      this.setState({ screenType: 'contain' });
    }
     
  };
  renderToolbar = () => (
    <View>
      <Text> toolbar </Text>
    </View>
  );
  onSeeking = currentTime => this.setState({ currentTime });

  render() {
    return (
      <View style={styles.container}>
        <Video
          onEnd={this.onEnd}
          onLoad={this.onLoad}
          onLoadStart={this.onLoadStart}
          onProgress={this.onProgress}
          paused={this.state.paused}
          ref={videoPlayer => (this.videoPlayer = videoPlayer)}
          resizeMode={this.state.screenType}
          onFullScreen={this.state.isFullScreen}
          // source={{ uri: 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4' }} 
          //local file 
          source={require('./big_buck_bunny.mp4')} // local file


          style={styles.mediaPlayer}
          volume={10}
        />
        <MediaControls
          duration={this.state.duration}
          isLoading={this.state.isLoading}
          mainColor="#333"
          onFullScreen={this.onFullScreen}
          onPaused={this.onPaused}
          onReplay={this.onReplay}
          onSeek={this.onSeek}
          onSeeking={this.onSeeking}
          playerState={this.state.playerState}
          progress={this.state.currentTime}
          toolbar={this.renderToolbar()}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,

  },
  toolbar: {
    marginTop: 30,
    backgroundColor: 'white',
    padding: 10,
    borderRadius: 5,
  },
  mediaPlayer: {
    
    width:"100%",
    height:"100%",
    position: 'absolute',
    backgroundColor: 'black',
  },
});

@jenshandersson
Copy link
Contributor

Closed by #2013 (removing the Android JS fullscreen feature as it was too buggy)

@sanju280696
Copy link

Hey @TechAsif did you find any solution on it. bcz i'm facing same issue

@TechAsif
Copy link
Author

TechAsif commented Nov 30, 2020 via email

@sanju280696
Copy link

I can not find

On Nov 30, 2020 12:13 PM, "sanju280696" @.***> wrote: Hey @TechAsif https://github.com/TechAsif did you find any solution on it. bcz i'm facing same issue — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ4KEZZHWJOKGWELTWOLWNTSSMZX3ANCNFSM4NSQJ6XQ .

Okay no problem! thanks for reply,
I don't know why its happen !

@TechAsif
Copy link
Author

TechAsif commented Nov 30, 2020 via email

@sanju280696
Copy link

Welcome brother, I think we should go in flutter now.

On Nov 30, 2020 12:54 PM, "sanju280696" @.> wrote: I can not find … <#m_1381388679904065932_> On Nov 30, 2020 12:13 PM, "sanju280696" @.> wrote: Hey @TechAsif https://github.com/TechAsif https://github.com/TechAsif did you find any solution on it. bcz i'm facing same issue — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 (comment) <#2035 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ AJ4KEZZHWJOKGWELTWOLWNTSSMZX3ANCNFSM4NSQJ6XQ . Okay no problem! thanks for reply, I don't know why its happen ! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ4KEZZ3JIQNUUIYKE5TG73SSM6RNANCNFSM4NSQJ6XQ .

i also think so ! bro

@TechAsif
Copy link
Author

TechAsif commented Nov 30, 2020 via email

@sanju280696
Copy link

Where are you from bro?

On Nov 30, 2020 1:02 PM, "sanju280696" @.*> wrote: Welcome brother, I think we should go in flutter now. … <#m_-4775240396839121926_> On Nov 30, 2020 12:54 PM, "sanju280696" @.> wrote: I can not find … <#m_1381388679904065932_> On Nov 30, 2020 12:13 PM, "sanju280696" @.> wrote: Hey @TechAsif https://github.com/TechAsif https://github.com/TechAsif https://github.com/TechAsif did you find any solution on it. bcz i'm facing same issue — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 <#2035> (comment) <#2035 (comment) <#2035 (comment)>>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ AJ4KEZZHWJOKGWELTWOLWNTSSMZX3ANCNFSM4NSQJ6XQ . Okay no problem! thanks for reply, I don't know why its happen ! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 (comment) <#2035 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ AJ4KEZZ3JIQNUUIYKE5TG73SSM6RNANCNFSM4NSQJ6XQ . i also think so ! bro — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2035 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ4KEZ6BNAIZRBUHTI7JYV3SSM7RTANCNFSM4NSQJ6XQ .

gujarat

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants