réagir+natif+vidéo crée un effet plein écran-js tutoriel-php.cn

réagir+natif+vidéo crée un effet plein écran

php中世界最好的语言

Libérer： 2018-06-15 15:14:26

original

1963 Les gens l'ont consulté

Cette fois, je vous propose de réagir+natif+vidéo pour créer un effet plein écran. Quelles sont les précautions pour réagir+natif+vidéo pour créer un effet plein écran ? Voici un cas pratique, prenons-le ? un regard.

react-native-video est un composant sur github dédié à React Native pour la lecture vidéo. Ce composant est le composant de lecture vidéo le plus polyvalent et le plus facile à utiliser sur React Native. Il est toujours en développement continu. Bien qu'il y ait encore quelques bugs, il n'affecte fondamentalement pas son utilisation.

Cet article explique principalement comment utiliser React-Native-Video pour lire des vidéos et comment obtenir une lecture en plein écran. Lorsque l'écran pivote, la taille du lecteur vidéo sera ajustée pour afficher en plein écran ou se réduire en plein écran. écran.

Tout d’abord, jetons un coup d’œil aux fonctions de React-Native-Video.

Fonctions de base

Contrôler la vitesse de lecture
Contrôler le volume
Prise en charge de la fonction muet
Prise en charge de la lecture et de la pause
Prise en charge de la lecture audio en arrière-plan
Prend en charge les styles personnalisés, tels que le réglage de la largeur et de la hauteur
Les appels d'événements riches, tels que onLoad, onEnd, onProgress, onBuffer, etc., peuvent être personnalisés sur l'interface utilisateur via événements correspondants, tels que onBuffer, nous pouvons afficher une barre de progression pour rappeler à l'utilisateur que la vidéo est mise en mémoire tampon.
Prend en charge la lecture en plein écran, utilisez la méthode presentFullscreenPlayer. Cette méthode fonctionne sur iOS mais pas sur Android. Voir le numéro 534, le numéro 726 a le même problème.
Prend en charge la progression du saut, utilisez la méthode de recherche pour accéder à l'endroit spécifié pour la lecture
Vous pouvez charger l'adresse vidéo à distance pour la lecture, ou vous pouvez charger la vidéo stockée localement dans RN.

Notes

react-native-video définit la vidéo via l'attribut source Lors de la lecture d'une vidéo à distance, utilisez uri pour définir l'adresse vidéo. , comme suit :

source={{uri: http://www.xxx.com/xxx/xxx/xxx.mp4}}

Copier après la connexion

Lors de la lecture de vidéos locales, utilisez la méthode suivante :

source={require('../assets/video/turntable.mp4')}

Copier après la connexion

Il est à noter que l'attribut source ne peut pas être vide, et l'uri ou la ressource locale doit être défini, sinon cela provoquera le crash de l'application. uri ne peut pas être défini sur une chaîne vide et doit être une adresse spécifique.

Configuration de l'installation

Utilisez npm i -S React-native-video ou Yarn Add React-Native-Video pour installer une fois terminé, utilisez React-Native Link React. La commande -native -video lie cette bibliothèque.

Après avoir exécuté la commande link côté Android, la configuration est terminée en Gradle. Le côté iOS doit également être configuré manuellement. Voici une brève explication. Contrairement aux instructions officielles, nous n'utilisons généralement pas tvOS et supprimons la bibliothèque libRCTVideo.a automatiquement liée dans les phases de construction. cliquez sur le signe plus ci-dessous pour ajouter à nouveau libRCTVideo.a. Veillez à ne pas sélectionner le mauvais.

Lecture vidéo

Il est en fait très simple de mettre en œuvre la lecture vidéo. Il suffit de définir la ressource source de la vidéo. composant, puis définissez le style. Ajustez simplement la largeur et la hauteur du composant vidéo.

<Video
 ref={(ref) => this.videoPlayer = ref}
 source={{uri: this.state.videoUrl}}
 rate={1.0}
 volume={1.0}
 muted={false}
 resizeMode={'cover'}
 playWhenInactive={false}
 playInBackground={false}
 ignoreSilentSwitch={'ignore'}
 progressUpdateInterval={250.0}
 style={{width: this.state.videoWidth, height: this.state.videoHeight}}
/>

Copier après la connexion

Parmi eux, videoUrl est la variable que nous utilisons pour définir l'adresse vidéo, et videoWidth et videoHeight sont utilisés pour contrôler la largeur et la hauteur de la vidéo.

Implémentation de la lecture plein écran

La lecture vidéo en plein écran est en fait une lecture plein écran en écran horizontal n'est généralement pas en plein écran. Pour réaliser un affichage vidéo plein écran lorsque l'appareil est projeté horizontalement, il est très simple d'y parvenir en modifiant la largeur et la hauteur du composant vidéo.

Ci-dessus, nous stockons videoWidth et videoHeight dans l'état, le but est de rafraîchir l'interface utilisateur en modifiant les valeurs des deux variables, afin que la largeur et la hauteur de la vidéo puissent changer en conséquence. La question est de savoir comment obtenir la largeur et la hauteur modifiées à temps lorsque l'écran de l'appareil pivote ?

En mode portrait, la largeur initiale de la vidéo que j'ai définie est la largeur de l'écran de l'appareil et la hauteur est de 9/16 de la largeur, c'est-à-dire qu'elle est affichée dans un rapport 16:9. En mode paysage, la largeur de la vidéo doit être la largeur de l'écran et la hauteur doit être la hauteur de l'écran actuel. Étant donné que la largeur et la hauteur de l'appareil changent lorsque l'écran est horizontal, l'interface utilisateur peut être actualisée dans le temps en obtenant la largeur et la hauteur dans le temps, et la vidéo peut être affichée en plein écran.

刚开始我想到的办法是使用 react-native-orientation 监听设备转屏的事件，在回调方法中判断当前是横屏还是竖屏，这个在iOS上是可行的，但是在Android上横屏和竖屏时获取到宽高值总是不匹配的（比如，横屏宽384高582，竖屏宽582高384，显然不合理），这样就无法做到统一处理。

所以，监听转屏的方案是不行的，不仅费时还得不到想要的结果。更好的方案是在render函数中使用View作为最底层容器，给它设置一个"flex：1"的样式，使其充满屏幕，在View的onLayout方法中获取它的宽高。无论屏幕怎么旋转，onLayout都可以获取到当前View的宽高和x、y坐标。

/// 屏幕旋转时宽高会发生变化，可以在onLayout的方法中做处理，比监听屏幕旋转更加及时获取宽高变化
 _onLayout = (event) => {
 //获取根View的宽高
 let {width, height} = event.nativeEvent.layout;
 console.log('通过onLayout得到的宽度：' + width);
 console.log('通过onLayout得到的高度：' + height);
 
 // 一般设备横屏下都是宽大于高，这里可以用这个来判断横竖屏
 let isLandscape = (width > height);
 if (isLandscape){
  this.setState({
  videoWidth: width,
  videoHeight: height,
  isFullScreen: true,
  })
 } else {
  this.setState({
  videoWidth: width,
  videoHeight: width * 9/16,
  isFullScreen: false,
  })
 }
 };

Copier après la connexion

这样就实现了屏幕在旋转时视频也随之改变大小，横屏时全屏播放，竖屏回归正常播放。注意，Android和iOS需要配置转屏功能才能使界面自动旋转，请自行查阅相关配置方法。

播放控制

上面实现了全屏播放还不够，我们还需要一个工具栏来控制视频的播放，比如显示进度，播放暂停和全屏按钮。具体思路如下：

使用一个View将Video组件包裹起来，View的宽高和Video一致，便于转屏时改变大小
设置一个透明的遮罩层覆盖在Video组件上，点击遮罩层显示或隐藏工具栏
工具栏中要显示播放按钮、进度条、全屏按钮、当前播放时间、视频总时长。工具栏以绝对位置布局，覆盖在Video组件底部
使用react-native-orientation中的lockToPortrait和lockToLandscape方法强制旋转屏幕，使用unlockAllOrientations在屏幕旋转以后撤销转屏限制。

这样才算是一个有模有样的视频播放器。下面是竖屏和横屏的效果图