Question

我正面临这个奇怪的问题，如果全屏设置为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 ，并且在api调用后设置了this.state.videoId，

面对重叠问题后，我已经使用了高度并移除了本机基本抽屉。然后它开始工作了。

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

Answer 1

找到了解决方法here

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 }}
            />
        );
    }
}

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

如果不是全屏，则无法播放React Native Youtube视频

1 个答案: