如何在本机反应中自动播放 youtube 嵌入视频？答案

【问题标题】：how to autoplay youtube embedded video in react native?如何在本机反应中自动播放 youtube 嵌入视频？
【发布时间】：2018-08-17 15:09:01
【问题描述】：

我正在尝试在我的 react 本机应用程序中自动播放 youtube 嵌入视频。

这是我的代码，

render() {
    const { data } = this.props;
    const { loading } = this.state;
    return (
        <View>
            <CloseButton onTrigger={this.closeModal.bind(this)} />
            <PlayIcon onTrigger={this.playVideo} />
            <Image source={{uri:data.src}} resize='contain' style={{height:250}} />
           <Image 
                source={require('../../assets/img/grediant.png')}
                resizeMode='cover' style={styles.gradientImage} />
            <ContentWidget style={styles.infoContentTwo}>
                <MyAppText style={{color:'white'}}>{data.title}</MyAppText>
            </ContentWidget>
            {this.state.openVideo && <View style={styles.webViewStyle}>
                <WebView style={{height:250}} source={{uri:`${data.video}?autoplay=1`}} fullScreen={true} />
            </View>}
            {loading && <Spinner />}
        </View>
    );
}

但它不起作用，我有一个 playIcon 自定义按钮，如果我单击该按钮，则应该播放 youtube 视频。我不知道我在代码中哪里错了。

【问题讨论】：

我也在寻找相同的....即使在设置 mediaPlaybackRequiresUserAction = false 之后。它不工作。
我也在寻找相同的......因为设置 mediaPlaybackRequiresUserAction = false 不起作用。

标签： react-native youtube autoplay

【解决方案1】：

您可以使用 react-native-youtube 将 youtube 视频嵌入到您的 react native 项目中。您可以配置该属性以自动播放视频。

<YouTube
  videoId="KVZ-P-ZI6W4"   // The YouTube video ID
  play={true}             // control playback of video with true/false 
  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 })}
  style={{ alignSelf: 'stretch', height: 300 }}
/>

【讨论】：