Embed Youtube Video in Webview von React Native

Ich versuche, Youtube Videos in native Android/iOS-App reagieren zu spielen. Ich habe eine Webansicht definiert:Embed Youtube Video in Webview von React Native

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

Und das Bestehen der URL des Videos, die ich spielen möchte:

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

Aber das zeigt die ganze youtube Seite in der Webansicht mit den Kommentaren.

Ich möchte nur den Videobereich angezeigt werden und nicht den Kommentarbereich. Fehlt etwas in der URL?

Quelle

2016-07-01 triandicAnt

nur ein Kommentar, wird Google Ihre App blockieren, wenn seine Videos außerhalb von youtube zu spielen. – giannisf

Stellen Sie sicher, dass Ihr Video in Android nicht im Hintergrund abgespielt wird, wenn Sie das Gerät sperren. Andernfalls wird die App aus dem Google Play Store abgelehnt. –

Ich denke, Sie können die eingebettete HTML von Youtube mit dem Video laden, direkt in Ihre native Webview reagieren. Anstatt zu einer URL navigiert würden Sie stattdessen das Attribut der WebView Quelle auf Ihre HTML, etwa so:

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

basierend auf this stack overflow post beschreiben, wie ein YouTube iframe in einen normalen Android webview laden Sie ersetzen könnten „HTML hier“mit dem eigentlichen hTML so würde es wie folgt aussehen:

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

Sie die Anweisungen für das erhalten der embed link for a youtube video here bekommen kann.

Quelle

2016-07-02 05:21:07

Der einfachste Weg, YouTube in das React Native iOS-Gerät einzubetten, ist die Verwendung der <WebView>. Alles, was Sie tun müssen, ist watch?v= durch embed zu 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'}} 
/>

Quelle

2016-08-04 05:55:09

Für mich in beiden Android Emulator und Gerät (HTC Wunsch) arbeiten, nur mit flex hat nicht funktioniert. (musste Höhe und Breite angeben) –

Embed Youtube Video in Webview von React Native

Antwort

Verwandte Themen