Блог

Я использовал видеоплеер react native в своем приложении. я хотел установить видео на весь экран, но обрезать с обеих сторон. Я использовал высоту и ширину «окна»

 width: Dimensions.get('window').width
height: Dimensions.get('window').height
  

Но он не работает на полноэкранном мобильном устройстве, как на последнем экране устройства.

 <View style={customStyles.videoWrapper}>
            {
                video.uri !== '' ?
                    <Video
                        {...props}
                        style={[
                            styles.video,
                            this.getSizeStyles(),
                            style,
                            customStyles.video,
                        ]}
                        ref={p => {
                            this.player = p;
                        }}
                        muted={this.props.muted || this.state.isMuted}
                        paused={this.props.paused
                            ? this.props.paused || !this.state.isPlaying
                            : !this.state.isPlaying}
                        fullscreenOrientation={"all"}
                        onProgress={this.onProgress}
                        onEnd={this.onEnd}
                        onBuffer={this.onBuffer}
                        onLoad={this.onLoad}
                        source={video}
                        fullscreen={this.state.isFullscreen}
                        resizeMode={resizeMode}
                        rate={this.props.rate}
                    /> :
                    <View style={[this.getSizeStyles(), {backgroundColor: '#000'}]}/>
            }

            <View
                style={[
                    this.getSizeStyles(),
                    {marginTop: -this.getSizeStyles().height}
                ]}
            >
                <TouchableOpacity
                    style={styles.overlayButton}
                    onPress={() => {
                        this.showControls();
                        if (pauseOnPress)
                            this.onPlayPress();
                    }}
                    onLongPress={() => {
                        if (fullScreenOnLongPress amp;amp; Platform.OS !== 'android')
                            this.onToggleFullScreen();
                    }}
                />
                {this.state.isBuffering ? this.renderBuffer() :
                    (this.state.isControlsVisible)
                        ? this.renderControls() : null}
            </View>

        </View>
  

вот стиль видео

  video: {
    backgroundColor: 'black',
},
  

getStyle таблица стилей

 getSizeStyles() {
    const {videoWidth, videoHeight} = this.props;
    const {width} = this.state;
    const ratio = videoHeight / videoWidth;

    if (this.state.isFullscreen) {
        return {
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height,
        }
    }

    return {
        height: width * ratio,
        width,
    };

}
  

у меня есть функция создания полноэкранного режима с ориентацией

 onToggleFullScreen() {
    console.log("PixelRatio ",PixelRatio.startDetecting)
    if (this.props.onFullscreen) {
        this.props.onFullscreen(!this.state.isFullscreen);
    }

    this.state.isFullscreen ? Orientation.lockToPortrait() : Orientation.lockToLandscapeLeft();

    if (this.player !== null) {
        this.player.presentFullscreenPlayer();
    }

    if (Platform.OS === 'android') {
        this.onAndroidFullScreenToggle();
    }
    this.setState({
        isFullscreen: !this.state.isFullscreen
    });
}
  

Попробуйте, это может помочь

 <Video
        source={{ uri: this.state.videoUrl }} // Can be a URL or a local file.
        ref={ref => {
          this.player = ref;
        }}
        style={styles.video}
        fullscreen={true}
        resizeMode="cover"
/>

export default StyleSheet.create({

 video: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backgroundColor: Colors.black,
  }
});