wake-up-neo.com

Betten Sie ein Youtube-Video in den Webview von React Native ein

Ich versuche, Youtube-Videos in reaktiver Android/iOS-App wiederzugeben. Ich habe eine Webansicht definiert:

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

Und die URL des Videos übergeben, das ich abspielen möchte:

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

Hiermit wird jedoch die gesamte Youtube-Seite einschließlich der Kommentare in der Webansicht angezeigt.

 enter image description here

Ich möchte nur den Videoabschnitt und nicht den Kommentarbereich anzeigen. Fehlt etwas in der URL?

javascriptandroidwebviewyoutubereact-native
7
triandicAnt

Der einfachste Weg, YouTube in das React Native iOS-Gerät einzubetten, ist der <WebView>. Sie müssen nur watch?v= durch embed ersetzen. Dies funktioniert nicht mit Android. 

Beispiel:

<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

Ich denke, Sie können die eingebettete HTML-Datei von YouTube mit dem Video direkt in Ihren reaktiven Webview laden. Anstatt zu einer URL zu navigieren, würden Sie stattdessen das Quellattribut des WebView auf Ihre HTML-Datei setzen, wie folgt:

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

basierend auf this stack overflow post das beschreibt, wie ein youtube-iframe in einen normalen Android-Webview geladen wird, könnten Sie "HTML" hier durch die eigentliche HTML-Datei ersetzen, sodass es so aussehen würde: 

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

Die Wegbeschreibung zum embed-Link für ein Youtube-Video finden Sie hier .

3
Dr. Nitpick

Ich hatte dein Problem. Sie möchten, dass Ihre Benutzer das Videotutorial als Requisiten weitergeben, aber ein naiver Benutzer weiß nicht, was ein eingebetteter Link ist. Er kopiert einfach eine URL aus dem Browser und fügt sie ein, die nicht die eingebettete URL ist. Sie können sie jedoch konvertieren es. Siehe dieses Beispiel:

Originalvideo: - https://www.youtube.com/watch?v=qaiLSpqeBHY
Eingebettetes Video: - https://www.youtube.com/embed/qaiLSpqeBHY

Mal sehen, wie man es konvertieren kann:

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

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

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

console.log(Embed)

Hier ist Ihr eingebettetes Video, das von der ursprünglichen Video-URL konvertiert wurde.

Live Beispiel: -

   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

Dieser Code hat für mich funktioniert 

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