React NativeのWebviewにyoutubeビデオを埋め込む

私はネイティブのアンドロイド/ iosアプリケーションに反応してYoutubeビデオを再生しようとしています。React NativeのWebviewにyoutubeビデオを埋め込む

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

そして、私は再生したい動画のURLを渡します：私はWebViewの定義されている

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

をしかし、これはコメント欄を含めWebViewの全体ユーチューブのページが表示されます。

私は唯一のビデオセクションではなくコメントセクションを表示したいです。 URLに何か不足していますか？

出典

2016-07-01 triandicAnt

だけのコメントは、Googleがアプリをブロックします。 – giannisf

端末のロック時に、Androidの動画がバックグラウンドで再生されないようにしてください。そうしないと、アプリはGoogle Playストアから拒否されます。 –

私はyoutubeから埋め込みhtmlを読み込んで、ビデオと一緒にあなたの反応するネイティブwebviewに直接読み込むことができると思います。むしろURLに移動よりも、あなたの代わりにそのように、あなたのhtmlへのWebViewのソース属性を設定します：

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

をあなたは「置き換えることができ、通常のAndroidのWebView HTMLにユーチューブはiframeをロードする方法を説明しthis stack overflow postに基づきますここでは、」実際のHTMLで、それは次のようになりますので：あなたはembed link for a youtube video hereを取得するための方向性を得ることができます

<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>" }} 
.../>

。

出典

2016-07-02 05:21:07

React Native iOSデバイスにYouTubeを埋め込む最も簡単な方法は、<WebView>を使用することです。 watch?v=をembedに置き換えるだけです。これはAndroidでは動作しません。

例：そのはユーチューブの外で動画を再生した場合

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

出典

2016-08-04 05:55:09

私のために働く両方のアンドロイドエミュレータとデバイス（htc欲望）、ちょうどフレックスを使用して動作しませんでした。（高さと幅を指定しなければならなかった） –

React NativeのWebviewにyoutubeビデオを埋め込む

答えて

関連する問題