web-dev-qa-db-fra.com

Incorporer la vidéo youtube dans la vue Web de React Native

J'essaie de lire des vidéos Youtube dans une application native pour Android/iOS. J'ai défini une webview:

               <WebView
                    style={styles.frame}
                    url={this.props.url}
                    renderLoading={this.renderLoading}
                    renderError={this.renderError}
                    automaticallyAdjustContentInsets={false}
                />

Et en passant l'URL de la vidéo que je veux lire:

this.navigate('Play', 'https://www.youtube.com/watch?v=RJa4kG1N3d0')

Mais cela affiche la page youtube entière dans la vue Web, y compris la section commentaires.

 enter image description here

Je souhaite afficher uniquement la section vidéo et non la section de commentaires. Est-ce qu'il manque quelque chose dans l'URL?

javascriptandroidwebviewyoutubereact-native
7
triandicAnt

Le moyen le plus simple d'intégrer YouTube au périphérique iOS natif de React consiste à utiliser le <WebView>. Tout ce que vous avez à faire est de remplacer watch?v= par embed. Cela ne fonctionnera pas avec Android. 

Exemple:

<WebView
        style={{flex:1}}
        javaScriptEnabled={true}
        source={{uri: 'https://www.youtube.com/embed/ZZ5LpwO-An4?rel=0&autoplay=0&showinfo=0&controls=0'}}
/>
12
vincent mathew

Je pense que vous pouvez charger le code HTML incorporé à partir de YouTube avec la vidéo, directement dans votre visualisation Web native. Plutôt que de naviguer vers une URL, définissez plutôt l'attribut source de WebView sur votre code HTML, comme suit:

<WebView source={{ html: "HTML here" }} 
.../>

basé sur ce message de débordement de pile décrivant comment charger un iframe youtube dans une vue Web Android normale, vous pouvez remplacer "HTML here" par le code HTML proprement dit: 

<WebView source={{ html: "<html><body>Look Ma' a video! <br /> <iframe width="560" height="315" src="https://www.youtube.com/embed/RJa4kG1N3d0" frameborder="0" allowfullscreen></iframe></body></html>" }} 
.../>

Vous pouvez obtenir les instructions pour obtenir le lien intégrer une vidéo youtube ici .

3
Dr. Nitpick

Ce code a fonctionné pour moi 

<WebView
        style={{ marginTop: 20, width: 320, height: 230 }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        source={{ uri: "https://www.youtube.com/embed/-ZZPOXn6_9w" }}
      />
0
Nick.K