时间戳

首页 > 解决方案 > 如果不是全屏，则 React Native Youtube 视频不会播放

react-native - 如果不是全屏，则 React Native Youtube 视频不会播放

问题描述

我正面临这个奇怪的问题，如果全屏设置为 false，我的 youtube 视频将无法播放。但是，如果我将其设置为 true，则它可以正常工作。我不需要全屏。以下是我的代码

{this.state.showYoutube &&

    <YouTube
        apiKey="MY-YOUTUBE-API-KEY"
        videoId={this.state.videoId}   // The YouTube video ID
        play={false}             // control playback of video with true/false
        fullscreen={false}       // control whether the video should play in fullscreen or inline
        loop={false}             // control whether the video should loop when ended

        //onReady={e => this.setState({ isReady: true })}
        //onChangeState={e => this.setState({ status: e.state })}
        //onChangeQuality={e => this.setState({ quality: e.quality })}
        //onError={e => this.setState({error: e.error})}
        onError={e => console.log(e.error)}

        style={{alignSelf: 'stretch', height: 300}}
    />

}

如果this.state.showYoutube设置为 true 则将显示Youtube并在this.state.videoIdapi 调用后设置，

在遇到重叠问题后，我使用了高度并删除了本机基础抽屉。然后它开始工作了。

但现在它不再工作了，请告诉我我做错了什么。

标签： react-native

解决方案

在这里找到了解决方案

export default class extends Component {
    state = {
        height: 215
    }

    handleReady = () => {
        setTimeout(() => this.setState({ height: 216 }), 500);
    }

    render() {
        return (
            <YouTube
                apiKey   = {config.YOUTUBE_API_KEY}
                ref      = {item => this.player = item}
                videoId  = {getVideoId(uri)}
                controls = {1}
                onReady  = {this.handleReady}
                style    = {{ alignSelf: 'stretch', height: height }}
            />
        );
    }
}

它对我有用，但仍然存在一个已知问题，即如果从全屏恢复，屏幕不会自动定向。

推荐阅读