web-dev-qa-db-ja.com

React NativeのWebviewにyoutubeビデオを埋め込みます

YouTubeの動画を反応するネイティブAndroid/iosアプリで再生しようとしています。私はウェブビューを定義しました：

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

そして、私が再生したいビデオのURLを渡す：

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

ただし、これにより、コメントセクションを含むyoutubeページ全体がWebビューに表示されます。

enter image description here

コメントセクションではなく、ビデオセクションのみを表示したい。 URLに不足しているものはありますか？

javascriptandroidwebviewyoutubereact-native
10
triandicAnt

YouTubeをReactネイティブiOSデバイスに埋め込む最も簡単な方法は、<WebView>。必要なことは、watch?v= with 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'}}
/>
14
vincent mathew

埋め込みhtmlをyoutubeからビデオとともに、反応するネイティブWebビューに直接ロードできると思います。 URLに移動するのではなく、次のようにWebViewのソース属性をHTMLに設定します。

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

このスタックオーバーフローの投稿 youtube iframeを通常のAndroid ：

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

YouTubeビデオのリンクをここに埋め込む を取得するための指示を取得できます。

4
Dr. Nitpick

このコードは私のために働いた

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

問題がありました。ユーザーにビデオチュートリアルを小道具として渡すようにしたいが、素朴なユーザーは埋め込みリンクが何であるかわからないため、ブラウザーからURLをコピーして貼り付けてから貼り付けますが、埋め込みURLではありませんが、変換できますそれ。この例を参照してください。

オリジナルビデオ：- https://www.youtube.com/watch?v=qaiLSpqeBHY
埋め込み動画：- https://www.youtube.com/embed/qaiLSpqeBHY

変換方法を見てみましょう：

const OriginalVideo = "https://www.youtube.com/watch?v=qaiLSpqeBHY"

const SplitedVideo = OriginalVideo.split("watch?v=")

const Embed = SplitedVideo.join("embed/")

console.log(Embed)

これは、元のビデオURLから変換された埋め込みビデオです。

ライブ例：-

   componentDidMount() {
        const Video = this.props.navigation.getParam("Video");

        const MyVideo = Video.split("watch?v=");

        const EmbededVideo = MyVideo.join("embed/");

        this.setState({
         Video: EmbededVideo
        });
        }
1
Ali Haider