2
votes

Comment déclencher le mode plein écran lors de la lecture pour une vidéo YouTube intégrée dans React Native WebView?

J'ai une vidéo YouTube intégrée dans un React Native WebView. J'utilise react-native-android-fullscreen-webview-video bibliothèque pour Android qui fonctionne bien en mode portrait et paysage, mais j'ai besoin que la vidéo soit par défaut en plein écran lorsque l'utilisateur appuie sur play.

J'ai essayé d'autres bibliothèques pour cela, y compris react-native-youtube , mais chacun a entraîné une lecture boguée en portrait ou en paysage.

Voici mon code. Tout fonctionne bien, j'ai juste besoin de jouer en plein écran par défaut.

<WebView source={{ uri: videoUrl }} />

android react-native webview

0 commentaires

3 Réponses :

0
votes

essayez de cette façon et vous pouvez utiliser de nombreuses propriétés iframe pour le bouton youtube et de nombreuses choses à faire

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

6 commentaires

Merci pour le conseil. Pouvez-vous expliquer comment je pourrais utiliser les propriétés iFrame pour ouvrir en plein écran lorsque l'utilisateur appuie sur play?

Voici la documentation officielle des propriétés iFrame développeurs.google.com/youtube/player_parameters mais je vais suggérer vous utilisez react-native-youtube pour cela si facile à mettre en œuvre ...

Je vous remercie. J'ai essayé react-native-youtube mais c'était très bogué. Toujours lu automatiquement et la vidéo ne fonctionnait pas correctement en mode portrait (en raison d'un problème documenté).

J'ai lu les documents attentivement. Voici ce à quoi je fais référence: github.com/inProgress-team / react-native-youtube # problèmes-connus

À quels bugs et erreurs êtes-vous confronté, dites-moi que j'ai un exemple de mamy pour cela.

lorsque vous utilisez le mode plein écran, la vidéo s'ouvre en mode paysage sur Android comme prévu. Mais si l'utilisateur ramène l'écran en mode portrait, la vidéo est lue par incréments d'une seconde avant de s'arrêter. Nous pensons que quelque chose bloque la vue, mais nous ne pouvons pas déterminer quoi. Merci de votre aide.

2
votes

Cette bibliothèque fonctionne

react-native-android-fullscreen -webview-video

import WebView from 'react-native-android-fullscreen-webview-video';
<WebView style={{flex:1, height: 300} source={{ uri: 'https://www.youtube.com/embed/GV0B6nGf9mcrel=0&autoplay=0&showinfo=0&controls=1&fullscreen=1' }}/>

2 commentaires

Cela a fini par être la meilleure option pour moi. Je vous remercie!

Cette bibliothèque était obsolète et utilisait une vue Web obsolète. Prise en charge uniquement de la version RN inférieure à 0,60

2
votes

Cela fonctionne très bien pour moi

<WebView
 javaScriptEnabled={true}
 scrollEnabled={false}
 allowsFullscreenVideo={true}
 userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 
 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"
 source={{uri: `https://www.youtube.com/embed/${videoID}?&autoplay=1&mute=1&showinfo=0&controls=1&fullscreen=1`}}
 style={styles.video}
/>

0 commentaires