How react-native-video implements full-screen video playback

react-native-video is a component on github dedicated to React Native for video playback. This component is the most versatile and easy-to-use video playback component on React Native. It is still under continuous development. Although there are still some bugs, it basically does not affect its use. It is highly recommended. This article mainly introduces the method of react-native-video to realize full-screen video playback. I hope it can help you.

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

Basic functions

1. Control the playback rate

2. Control the volume

3. Support mute function

4. Support play and pause

5. Support background audio playback

6. Support customized styles, such as setting width and height

7. Rich event calls, such as onLoad, onEnd, onProgress, onBuffer, etc., can be customized on the UI through corresponding events , such as onBuffer, we can display a progress bar to remind the user that the video is buffering.

8. Support full-screen playback, use the presentFullscreenPlayer method. This method works on iOS but not on android. See issue#534, #726 has the same problem.

9. Support jump progress, use the seek method to jump to the specified place for playback

10. You can load the remote video address for playback, or you can Load the video stored locally in RN.

Notes

react-native-video sets the video through the source attribute. When playing remote video, use uri to set the video address, as follows:

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

When playing local videos, use the following method:

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

It should be noted that the source attribute cannot be Empty, uri or local resources must be set, otherwise the app will crash. uri cannot be set to an empty string and must be a specific address.

Installation configuration

Use npm i -S react-native-video or yarn add react-native-video to install. After completion, use react-native link react-native -video command links this library.

After executing the link command on the Android side, the configuration has been completed in gradle. The iOS side also needs to be manually configured. Here is a brief explanation. Different from the official instructions, we generally do not use tvOS. Select your own target and remove the automatically linked libRCTVideo.a library in the build phases. , and then click the plus sign below to re-add libRCTVideo.a. Be careful not to select the wrong one.

Video playback

It is actually very simple to implement video playback. We only need to set the source resource for the Video component and then set the style Just 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={&#39;cover&#39;}
 playWhenInactive={false}
 playInBackground={false}
 ignoreSilentSwitch={&#39;ignore&#39;}
 progressUpdateInterval={250.0}
 style={{width: this.state.videoWidth, height: this.state.videoHeight}}
/>

The videoUrl is the variable we use to set the video address, and videoWidth and videoHeight are used to control the video width and height.

Implementation of full-screen playback

Full-screen video playback is actually full-screen playback in horizontal screen. Vertical screen is generally not full-screen. To achieve full-screen video display when the device is horizontally screened, it is very simple to achieve by changing the width and height of the Video component.

Above we store videoWidth and videoHeight in state, the purpose is to refresh the UI by changing the values ​​​​of the two variables, so that the video width and height can change accordingly. The question is, how to obtain the changed width and height in time when the device screen is rotated?

When the video is in portrait mode, the initial width of the video I set is the width of the device screen, and the height is 9/16 of the width, that is, it is displayed in a 16:9 ratio. In landscape mode, the width of the video should be the width of the screen, and the height should be the height of the current screen. Since the width and height of the device change when the screen is horizontal, the UI can be refreshed in time by obtaining the width and height in time, and the video can be displayed in full screen.

The way I thought of at first was to use react-native-orientation to monitor the device screen rotation event, and determine whether the current screen is horizontal or vertical in the callback method. This is feasible on iOS, but on Android The width and height values ​​obtained when loading horizontal and vertical screens always do not match (for example, the horizontal screen width is 384 and the height is 582, and the vertical screen width is 582 and the height is 384, which is obviously unreasonable), so unified processing cannot be achieved.

Therefore, the solution of monitoring screen rotation is not feasible. It is not only time-consuming but also does not get the desired results. A better solution is to use View as the bottom container in the render function, set a "flex: 1" style to it so that it fills the screen, and obtain its width and height in the View's onLayout method. No matter how the screen is rotated, onLayout can obtain the width, height, x, and y coordinates of the current View.

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

In this way, the video will change size when the screen is rotated, full-screen playback in horizontal screen, and normal playback in vertical screen. Note that Android and iOS need to configure the screen rotation function to automatically rotate the interface. Please check the relevant configuration methods by yourself.

Playback control

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

1. Use a View to wrap the Video component. The width and height of the View are consistent with the Video, making it easy to change the size when turning the screen.

2. Set a transparent mask The layer covers the Video component, click the mask layer to display or hide the toolbar

3. The toolbar should display the play button, progress bar, full screen button, current play time, and total video duration. The toolbar is laid out in an absolute position and covers the bottom of the Video component

4. Use the lockToPortrait and lockToLandscape methods in react-native-orientation to force the screen to rotate, and use unlockAllOrientations to cancel the screen rotation restriction after the screen is rotated. .

This is a decent video player. The following are the renderings of vertical and horizontal screens

You no longer have to worry about the presentFullscreenPlayer method not working, full-screen playback is achieved It's actually very simple. Please see the demo for the specific code: https://github.com/mrarronz/react-native-blog-examples/tree/master/Chapter7-VideoPlayer/VideoExample.

The above is the detailed content of How react-native-video implements full-screen video playback. For more information, please follow other related articles on the PHP Chinese website!