React-Native-Video-Methode zur Implementierung der Vollbild-Videowiedergabe

In diesem Artikel wird hauptsächlich die Methode des React-Native-Videos zur Erzielung einer Vollbild-Videowiedergabe vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

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 erläutert, wie Sie React-Native-Video zum Abspielen von Videos verwenden und wie Sie eine Vollbildwiedergabe erreichen. Wenn der Bildschirm gedreht wird, wird die Größe des Videoplayers so angepasst, dass er im Vollbildmodus angezeigt oder vollständig minimiert wird Bildschirm.

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 und andernfalls URI oder lokale Ressourcen festgelegt werden müssen Die App wird abstürzen. uri kann nicht auf eine leere Zeichenfolge gesetzt werden und muss eine bestimmte Adresse sein.

Installationskonfiguration

Verwenden Sie npm i -S reagieren-native-video oder Garn hinzufügen reagieren-native-video Nach Abschluss verwenden Sie den Link reagieren 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.

Mein erster Gedanke 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 Unter 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. Es wird im Vollbildmodus abgespielt, wenn der Bildschirm horizontal ist, und kehrt zur normalen Wiedergabe zurück, wenn der Bildschirm vertikal ist. 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 und der Vollbildschaltflä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 sind mit denen des Videos identisch, sodass Sie die Größe bei Bedarf einfach ändern können Drehen Sie den Bildschirm.

2. Legen Sie eine transparente Maskenebene fest, um die Videokomponente abzudecken. Klicken Sie auf die Maskenebene, um die Symbolleiste anzuzeigen oder auszublenden.

3. Die In der Symbolleiste sollten die Wiedergabeschaltfläche, der Fortschrittsbalken, die Vollbildschaltfläche sowie die aktuelle Wiedergabezeit und die gesamte Videodauer angezeigt werden. Die Symbolleiste ist in einer absoluten Position angeordnet und deckt den unteren Rand der Videokomponente ab.

4. 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.

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.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Angular-Studiennotizen: Beispiele für die Integration von UI-Frameworks und -Steuerelementen von Drittanbietern

Node.js implementiert Registrierungs-E-Mail Aktivierungsfunktion Methodenbeispiele

Detaillierte Erläuterung des Babel-Loader-Dateipräprozessors von Webpack

Das obige ist der detaillierte Inhalt vonReact-Native-Video-Methode zur Implementierung der Vollbild-Videowiedergabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!