Wie React-Native-Video die Vollbild-Videowiedergabe implementiert

react-native-video ist eine Komponente auf Github, die React Native für die Videowiedergabe gewidmet ist. Diese Komponente ist die vielseitigste und am einfachsten zu verwendende Videowiedergabekomponente auf React Native. Sie wird immer noch weiterentwickelt. Obwohl es immer noch einige Fehler gibt, wird sie grundsätzlich nicht beeinträchtigt. In diesem Artikel wird hauptsächlich die Methode „React-Native-Video“ zur Vollbildwiedergabe von Videos vorgestellt.

Werfen wir zunächst einen Blick auf die Funktionen von React-Native-Video.

Grundfunktionen

1. Wiedergaberate steuern

2. Lautstärke regeln

3. Unterstützt die Stummschaltungsfunktion

4. Unterstützt Wiedergabe und Pause

5. Unterstützt die Audiowiedergabe im Hintergrund

6. Unterstützt benutzerdefinierte Stile wie das Festlegen von Breite und Höhe

7. Rich-Event-Aufrufe wie onLoad, onEnd, onProgress, onBuffer usw. können auf der Benutzeroberfläche angepasst werden Bei entsprechenden Ereignissen wie onBuffer können wir einen Fortschrittsbalken anzeigen, um den Benutzer daran zu erinnern, dass das Video gepuffert wird.

8. Unterstützt die Vollbildwiedergabe, verwendet die Methode presentFullscreenPlayer. Diese Methode funktioniert unter iOS, jedoch nicht unter Android. Siehe Problem Nr. 534, Nr. 726 hat das gleiche Problem.

9. Unterstützen Sie den Sprungfortschritt. Verwenden Sie die Suchmethode, um zur angegebenen Stelle für die Wiedergabe zu springen.

10. Sie können die Remote-Videoadresse für die Wiedergabe laden. Alternativ können Sie das lokal in RN gespeicherte Video laden.

Hinweise

react-native-video legt das Video über das Quellattribut fest. Verwenden Sie beim Abspielen von Remote-Videos uri, um die Videoadresse festzulegen , wie folgt:

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

Verwenden Sie beim Abspielen lokaler Videos die folgende Methode:

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

Es ist zu beachten, dass das Quellattribut nicht leer sein darf oder lokale Ressourcen festgelegt werden müssen, da die App sonst abstürzt. uri kann nicht auf eine leere Zeichenfolge gesetzt werden und muss eine bestimmte Adresse sein.

Installationskonfiguration

Verwenden Sie zum Installieren npm i -S reagieren-native-video oder Garn hinzufügen reagieren-native-video Der Befehl -native -video verknüpft diese Bibliothek.

Nachdem der Link-Befehl auf der Android-Seite ausgeführt wurde, ist die Konfiguration in Gradle abgeschlossen. Die iOS-Seite muss auch manuell konfiguriert werden. Anders als in der offiziellen Anleitung verwenden wir in der Build-Phase im Allgemeinen kein eigenes Ziel und entfernen es Klicken Sie auf das Pluszeichen unten, um libRCTVideo.a erneut hinzuzufügen. Achten Sie darauf, nicht das falsche auszuwählen.

Videowiedergabe

Es ist eigentlich sehr einfach, die Videowiedergabe zu implementieren. Wir müssen nur die Quellressource für das Video festlegen Komponente und legen Sie dann den Stil fest. Passen Sie einfach die Breite und Höhe der Videokomponente an.

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

Unter anderem ist videoUrl die Variable, mit der wir die Videoadresse festlegen, und videoWidth und videoHeight werden zur Steuerung der Videobreite und -höhe verwendet.

Implementierung der Vollbildwiedergabe

Die Vollbild-Videowiedergabe ist eigentlich eine Vollbildwiedergabe im horizontalen Bildschirm. Der vertikale Bildschirm ist im Allgemeinen nicht im Vollbildmodus. Um eine Vollbild-Videoanzeige zu realisieren, wenn das Gerät horizontal angezeigt wird, ist dies sehr einfach, indem die Breite und Höhe der Videokomponente geändert wird.

Oben speichern wir videoWidth und videoHeight im Status. Der Zweck besteht darin, die Benutzeroberfläche durch Ändern der Werte der beiden Variablen zu aktualisieren, sodass sich die Videobreite und -höhe entsprechend ändern können. Die Frage ist, wie man die geänderte Breite und Höhe rechtzeitig erhält, wenn der Gerätebildschirm gedreht wird.

Im Hochformat entspricht die anfängliche Breite des von mir eingestellten Videos der Breite des Gerätebildschirms und die Höhe beträgt 9/16 der Breite, d. h. es wird im Verhältnis 16:9 angezeigt. Im Querformat sollte die Breite des Videos der Breite des Bildschirms und die Höhe der Höhe des aktuellen Bildschirms entsprechen. Da sich Breite und Höhe des Geräts ändern, wenn der Bildschirm horizontal ist, kann die Benutzeroberfläche rechtzeitig aktualisiert werden, indem Breite und Höhe rechtzeitig ermittelt werden, und das Video kann im Vollbildmodus angezeigt werden.

Der erste Gedanke, den ich mir überlegt habe, war, React-Native-Orientation zu verwenden, um das Rotationsereignis des Gerätebildschirms zu überwachen und in der Rückrufmethode zu bestimmen, ob der aktuelle Bildschirm im Quer- oder Hochformat ist. Dies ist jedoch unter iOS machbar Auf Android stimmen die beim Laden horizontaler und vertikaler Bildschirme erhaltenen Breiten- und Höhenwerte immer nicht überein (z. B. beträgt die horizontale Bildschirmbreite 384 und die Höhe 582, und die vertikale Bildschirmbreite beträgt 582 und die Höhe beträgt 384). ist offensichtlich unzumutbar), so dass eine einheitliche Verarbeitung nicht erreicht werden kann.

Daher ist die Überwachung der Bildschirmrotation nicht nur zeitaufwändig, sondern führt auch nicht zu den gewünschten Ergebnissen. Eine bessere Lösung besteht darin, View als unteren Container in der Renderfunktion zu verwenden, einen „flex: 1“-Stil festzulegen, damit er den Bildschirm ausfüllt, und seine Breite und Höhe in der onLayout-Methode der View zu erhalten. Unabhängig davon, wie der Bildschirm gedreht wird, kann onLayout die Breite, Höhe sowie die X- und Y-Koordinaten der aktuellen Ansicht abrufen.

/// 屏幕旋转时宽高会发生变化，可以在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,
  })
 }
 };

Auf diese Weise ändert sich die Größe des Videos, wenn der Bildschirm gedreht wird, Vollbildwiedergabe im horizontalen Bildschirm und normale Wiedergabe im vertikalen Bildschirm. Beachten Sie, dass Android und iOS die Bildschirmrotationsfunktion konfigurieren müssen, um die Benutzeroberfläche automatisch zu drehen. Bitte überprüfen Sie die entsprechenden Konfigurationsmethoden selbst.

Wiedergabesteuerung

Die obige Implementierung der Vollbildwiedergabe reicht nicht aus. Wir benötigen auch eine Symbolleiste zur Steuerung der Videowiedergabe, z. B. zur Anzeige des Fortschritts, der Wiedergabepause usw Vollbild-Schaltflächen. Die konkreten Ideen lauten wie folgt:

1. Verwenden Sie eine Ansicht, um die Videokomponente zu umschließen. Die Breite und Höhe der Ansicht stimmen mit dem Video überein, sodass die Größe beim Drehen des Bildschirms leicht geändert werden kann 🎜>

   Legen Sie eine transparente Maske fest. Die Ebene deckt die Videokomponente ab. Klicken Sie auf die Maskenebene, um die Symbolleiste anzuzeigen oder auszublenden.

2. Die Symbolleiste sollte die Wiedergabeschaltfläche und den Fortschrittsbalken vollständig anzeigen Bildschirmtaste, aktuelle Wiedergabezeit und Gesamtvideodauer. Die Symbolleiste ist in einer absoluten Position angeordnet und deckt den unteren Rand der Videokomponente ab.

3. Verwenden Sie die Methoden lockToPortrait und lockToLandscape in React-Native-Orientierung, um die Drehung des Bildschirms zu erzwingen und zu verwenden unlockAllOrientations, um die Bildschirmrotationsbeschränkung aufzuheben, nachdem der Bildschirm gedreht wurde.

4. Dies ist ein anständiger Videoplayer. Nachfolgend finden Sie die Darstellungen der vertikalen und horizontalen Bildschirme

Sie müssen sich keine Sorgen mehr machen, dass die Methode presentFullscreenPlayer nicht funktioniert und die Vollbildwiedergabe implementiert wird Es ist eigentlich ganz einfach. Den spezifischen Code finden Sie in der Demo: https://github.com/mrarronz/react-native-blog-examples/tree/master/Chapter7-VideoPlayer/VideoExample.

Das obige ist der detaillierte Inhalt vonWie React-Native-Video die Vollbild-Videowiedergabe implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!