React-native-video implements full-screen video playback,

React-native-video implements full-screen video playback,

React-native-video is a playback component dedicated to React Native on github. This component is the most comprehensive and useful video play component on React Native. It is still under development. Although there are still some bugs, it basically does not affect the use. It is strongly recommended.

This article describes how to use react-native-video to play a video and how to play it in full screen mode. When the screen is rotated, the video player size is adjusted to display the full screen or hide the full screen.

First, let's take a look at the functions of react-native-video.

Basic functions

1. Control playback rate
2. Volume Control
3. Supports mute
4. Supports playing and pausing
5. Supports background audio playback.
6. Supports custom styles, such as setting width and height
7. A wide range of event calls, such as onLoad, onEnd, onProgress, and onBuffer, can be customized on the UI through corresponding events, for example, when onBuffer is used, we can display a progress bar prompting users that the video is being buffered.
8. Supports full-screen playback. Use the presentFullscreenPlayer method. This method works on iOS and does not work on android. See issue #534 and #726.
9. Supports jump progress. You can use the seek method to jump to a specified place for playing.
10. You can load the remote video address for playback, or load videos locally stored in RN.

Notes

React-native-video sets the video through the source attribute. When playing a remote video, use uri to set the video address, as shown below:

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

When playing a local video, use the following method:

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

Note that the source attribute cannot be empty. You must set the uri or local resource. Otherwise, the app will crash. Uri cannot be a Null String. It must be a specific address.

Install configurations

Use npm I-S react-native-video or yarn add react-native-video to install the SDK. After installation, use the react-native link react-native-video command to link the library.

After the Android end executes the link command, the configuration is completed in gradle. You also need to manually configure the iOS client. Here, we will briefly describe that, unlike the official instructions, we generally do not use tvOS and select your own target, remove the automatically linked libRCTVideo from build phases. a. Click the plus sign below to add libRCTVideo again. a. Do not select an error.

Video Playback

Video Playback is actually very simple. We only need to set the source resource for the Video component, and then set the style to adjust the width and height of the Video component.

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

VideoUrl is the variable used to set the video address, and videoWidth and videoHeight are used to control the video width.

Full Screen playback

Full-screen video playback is actually full-screen playback in the case of a horizontal screen. The vertical screen is generally not full-screen. To enable full-screen Video display on the horizontal screen of a device, you can simply change the width and height of the Video component.

We have stored videoWidth and videoHeight in the state to refresh the UI by changing the values of the two variables, so that the video width and height change accordingly. The problem is, how can I get the changed width and height in time when the device's screen rotates?

When the screen is portrait, the initial video width is set to the width of the device screen, and the height is 9/16 of the width, which is displayed at a ratio. The video width should be the screen width and the height should be the current screen height. As the width and height of the device change when the screen is horizontal, the UI can be refreshed in time when the width and height are obtained, and the video can be displayed in full screen.

At the beginning, I tried to use react-native-orientation to listen for screen switching events. In the callback method, I checked whether the current screen is landscape or landscape, this is feasible on iOS, but it always does not match when the width and height of the horizontal screen on Android are obtained (for example, the horizontal screen width is 384 and the height is 582, the portrait screen width is 582 and 384 in height, which is obviously unreasonable), so that unified processing cannot be achieved.

Therefore, the scheme of listening for screen conversion is not feasible, which is not only time-consuming but not expected. A better solution is to use View as the bottom-layer container in the render function and set a "flex: 1" style for it to fill the screen, obtain its width and height from the onLayout method of View. Regardless of how the screen is rotated, onLayout can obtain the width, height, and y coordinates of the current View.

/// When the screen is rotated, the width and height will change. You can handle the changes in onLayout method to obtain the width and height changes in a more timely manner than the monitoring screen rotation _ onLayout = (event) ==>{// get the width and height of the Root View let {width, height} = event. nativeEvent. layout; console. log ('width obtained through onLayout: '+ width); console. log ('height obtained through onLayout: '+ height); // generally, the height of a device is larger than that of a horizontal screen, here we can use this to determine the horizontal and vertical screen 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 ,})}};

In this way, the video size is changed when the screen is rotated. The screen is played in full screen mode on the horizontal screen, and the portrait screen returns to normal playback. Note: For Android and iOS, You need to configure the screen rotation function to automatically rotate the interface. Please refer to the relevant configuration methods on your own.

Playback Control

It is not enough to enable full-screen playback. We also need a toolbar to control video playback, such as display progress, pause playback, and full-screen buttons. The specific ideas are as follows:

1. Wrap the Video component with a View. The width and height of the View are consistent with those of the Video, so that the size of the Video can be changed during screen conversion.
2. Set a transparent mask layer to overwrite the Video component. Click the mask layer to display or hide the toolbar.
3. The toolbar displays the playback button, progress bar, full screen button, current playback time, and total video duration. The toolbar is displayed in an absolute position and overwrites it at the bottom of the Video component.
4. Use the lockToPortrait and lockToLandscape methods in react-native-orientation to forcibly rotate the screen. Use unlockAllOrientations to remove the screen rotation restriction after the screen rotation.

In this way, it can be regarded as a model video player. Below are the vertical and horizontal screens

You don't have to worry about the presentFullscreenPlayer method being ineffective anymore. It's actually easy to implement full-screen playback. For specific code, see demo: https://github.com/mrarronz/react-native-blog-examples/tree/master/Chapter7-VideoPlayer/VideoExample.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.