React native Video is a github component dedicated to react Native video playback. React Native is the most versatile and user-friendly video player component on React Native. It is still under development. There are still some bugs, but it doesn’t affect its use.

This article mainly introduces how to use React-native Video to play video, and how to achieve full screen playback. When the screen rotates, the size of the video player adjusts to display full screen or close down full screen.

Let’s take a look at the functions of React-native video.

The basic function

  1. Control the Playback rate
  2. Control volume
  3. Mute function
  4. Supports play and pause
  5. Supports background audio playback
  6. Support custom styles, such as setting width and height
  7. Rich event calls, such as onLoad, onEnd, onProgress, onBuffer, etc., can be customized by corresponding events on the UI. For example, when onBuffer is used, we can display a progress bar indicating that the video is being buffered.
  8. Supports full screen playback, using the presentFullscreenPlayer method. This works on iOS, but not on Android. See issue#534, #726 has the same problem.
  9. Support jump progress, use seek method jump to the specified place for playback
  10. You can load remote video addresses for playback, or load videos stored locally in RN.

Matters needing attention

React-native video Uses the source attribute to set the video, and uses the URI to set the video address when playing the remote video as follows:

source={{uri: "http://www.xxx.com/xxx/xxx/xxx.mp4"}}
Copy the code

To play local videos, use the following methods:

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

Note that the source attribute cannot be empty, the URI or local resource must be set, otherwise the app will flash back. The URI cannot be set to an empty string and must be a concrete address.

Install the configuration

Install NPM i-S react-native video or YARN add react-native video, and then run the react-native link react-native video command to link the library.

After executing the Link command on Android, gradle is already configured. There is a manual configuration required on iOS. Unlike the official instructions, we generally do not use tvOS. Select your own target and remove the librctVideo. a library that automatically links to you in build Phases. Then click the plus sign below to add librctVideo.a again.

Video playback

To realize the Video playback is actually very simple, we just 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} energy-conservation ={false}
    resizeMode={'cover'}
    playWhenInactive={false}
    playInBackground={false}
    ignoreSilentSwitch={'ignore'}
    progressUpdateInterval={250.0}
    style={{width: this.state.videoWidth, height: this.state.videoHeight}}
/>
Copy the code

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

The realization of full screen playback

In fact, the video is played in full screen in the case of landscape screen, vertical screen is generally not full screen. To achieve full screen display of Video when the device is in landscape mode, it is easy to say that it is achieved by changing the width and height of the Video component.

We stored videoWidth and videoHeight in state to refresh the UI by changing the values of the two variables and to change the videoWidth and energy accordingly. The question is, how do you get the changed width and height in time when the device’s screen rotates?

In portrait screen, I set the initial width of the video to be the width of the device screen, and the height to be 9/16 of the width, that is, the ratio of 16:9 display. The width of the video in landscape should be the width of the screen and the height should be the height of the current screen. As the width and height of the device change in landscape screen, the UI can be refreshed in time if the width and height are obtained in time, and the video can be displayed in full screen.

At the beginning, I came up with the method of using react-native orientation to monitor the event of screen rotation of the device, and determine whether the current screen is landscape or portrait in the callback method. This is feasible on iOS, but the width and height values obtained in landscape and portrait are always mismatched on Android (for example, landscape width 384 and height 582, Vertical screen width 582 high 384, obviously unreasonable), so it can not be unified processing.

Therefore, monitoring the screen rotation scheme is not feasible, not only time-consuming but also not the desired results. A better solution is to use the View as the bottom container in the Render function, give it a “Flex: 1” style, fill the screen, and get its width and height in the View’s onLayout method. No matter how the screen rotates, onLayout can get the width, height and x and Y coordinates of the current View.

_onLayout = (event) => {// Get the width and height of the root Viewlet {width, height} = event.nativeEvent.layout;
    console.log('Width from onLayout:' + width);
    console.log('Height from onLayout:'+ height); // The width of the horizontal screen is larger than the height of the horizontal screenlet isLandscape = (width > height);
    if (isLandscape){
      this.setState({
        videoWidth: width,
        videoHeight: height,
        isFullScreen: true})},else {
      this.setState({
        videoWidth: width,
        videoHeight: width * 9/16,
        isFullScreen: false,})}};Copy the code

This allows the video to change size when the screen rotates, play in full screen when the screen is landscape, and return to normal when the screen is portrait. Note That you need to configure the screen rotation function for Android and iOS to enable automatic screen rotation. For details, see related configuration methods.

Playback controls

It is not enough to realize the full screen playback above, we also need a toolbar to control the playback of the video, such as display progress, play pause and full screen button. Specific ideas are as follows:

  1. Wrap the Video component with a View that is the same width and height as the Video, making it easy to change the size during screen rotation
  2. Set a transparent mask layer over the Video component and click on the mask layer to show or hide the toolbar
  3. The toolbar displays the play button, progress bar, full-screen button, current playing time, and total video duration. The toolbar is laid out in an absolute position, covering the bottom of the Video component
  4. Use the lockToPortrait and lockToLandscape methods in react-native orientation to force the screen rotation, and use unlockAllOrientations to remove the screen rotation restriction after the screen rotation.

That’s what makes a decent video player. Below are renderings of portrait and landscape

Don’t worry anymore that the presentFullscreenPlayer method doesn’t work; full-screen playback is actually quite simple to implement. See demo: github.com/mrarronz/re… .

conclusion

  1. React-native orientation and react-native video are still defective, but they can be applied to the project
  2. Sometimes you have to think differently to solve a problem. Just sit down with a cup of tea, change your mindset and search terms and you might get the answer you’re looking for.