react-native-video is a component dedicated to React Native for video playback. This component is the most functional and best video player component on React Native. It is still developing, though there are still some bug, but it doesn't affect the use and recommend strongly.

this article mainly introduces how to use react-native-video to play videos and how to achieve full screen playback. When the screen rotates, the size of video players will be adjusted accordingly, showing full screen or full screen.

first takes a look at what functions react-native-video has.

  1. the basic functions of
  2. rate control playback volume control
  3. support
  4. mute function support
  5. support background play and pause audio playback
  6. support custom style, such as setting high width of
  7. rich event calls, such as onLoad, onEnd, onProgress, onBuffer and so on, can be customized processing UI the corresponding event, such as onBuffer, we can display a progress bar prompts the user is video buffer.
  8. supports full screen play, using the presentFullscreenPlayer method. This method is feasible on iOS and does not work on Android. As for issue#534 , #726 is the same problem.
  9. supports jump progress. It uses seek method to jump to the designated place to play
  10. , which can load remote video address to play, or to load RN's locally stored video.

react-native-video note by setting the source attribute of video playback, remote video using URI to set the video address as follows:

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

play local video, use

 as follows: 

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

note that the source attribute cannot be empty, URI or local resources must be set up, otherwise it will lead to app flash back. Uri cannot be set to an empty string, and must be a specific address.

installation and configuration

is installed by NPM I -S react-native-video or yarn add react-native-video. After completion, use the yarn command to run the library. After the link command is executed at the

Android side, the configuration has been completed in the gradle. IOS also need to manually configure it here, simply said that, unlike the official explanation is that we generally do not use tvOS, select your own target, get rid of the automatic link in libRCTVideo.a the library first moved in build phases, and then click add again plus libRCTVideo.a, that is not wrong.

video video player

player is actually very simple, we only need to set the Video component of source resources, and then set the style Video component for the adjustment of the width of the job.

 < 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 which is used to set our video address variables, videoWidth and videoHeight are used to control the video width and height.

full screen play,

video full screen play is actually full screen play under the horizontal screen, vertical screen is generally non full screen. To realize the video full screen display of the device horizontal screen, it is very simple to say, which is realized by changing the width of the Video component. On the top of

, we store videoWidth and videoHeight in state. The purpose is to refresh UI by changing the value of two variables, so that the video's wide and high energy will change accordingly. The question is, how do you get the change in time when the device's screen rotates?

vertical screen I set the initial width of the video is the width of the device screen, the height of the 9/16, that is, according to the proportion of 16:9. On the screen, the width of the video should be the width of the screen, and the height of the screen should be the height of the current screen. As the width of the device changes when the screen is wide, the UI can be refreshed in time and the video can be displayed in full screen.

started the method that I think is to use the react-native-orientation monitoring equipment transfer screen event, in a callback method is to determine the current horizontal or vertical screen display, the iOS is feasible, but on the Android horizontal screen and vertical screen to get wide high always do not match the value (for example, horizontal screen width 384 height 582, vertical screen width 582 height 384, obviously unreasonable), thus unable to do a unified treatment.

, therefore, to listen to the scheme is not good, not only time-consuming, but also can not get the desired results. A better solution is to use View as the bottom container in render function, set up a flex:1 style to fill it up, and get its width in View's onLayout method. No matter how the screen rotates, onLayout can get the width of the current View and the coordinates of the X and y.

 / / / screen rotation will change when the width and height, can be treated in the method of onLayout, more than the screen rotation monitor timely access to wide change (event) _onLayout = => View {/ / get the root width of let {width, height} = event.nativeEvent.layout; console.log (obtained by onLayout '+' width: width (console.log); 'obtained by onLayout height:' + height); / / general equipment are wider than the horizontal screen, here we can use this to determine 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,})}}; 

so as to realize the When the screen is rotating, the video changes in size, the screen is full screen when the screen is cross screen, and the vertical screen returns to normal play. Note that Android and iOS need to configure the screen to automatically rotate the interface. Please check the relevant configuration methods by yourself.

playback control

is not enough to achieve full screen play. We also need a toolbar to control video playback, such as display progress, play pause and full screen button. Specific ideas are as follows:

  1. View will use a Video component wrapped up, View wide and Video high, easy to change the screen to change the size of
  2. to set up a transparent cover mask layer on the Video component, click on the layer mask to show or hide the toolbar
  3. toolbar to display in the play button, the progress bar, full screen button, the current time, the total length of video playback. The toolbar is arranged in absolute position. It is covered at the bottom of the Video component.
  4. uses the lockToPortrait and lockToLandscape methods in react-native-orientation to force the rotation of the screen, and uses unlockAllOrientations to cancel the screen rotation after the screen is rotated.

is a model - like video player. The following is a vertical screen and horizontal screen renderings

no longer need to presentFullscreenPlayer method does not work and trouble, to achieve full screen playback in fact very simple. For specific code, please see demo:https://github.com/mrarronz/react-native-blog-examples/tree/master/Chapter7-VideoPlayer/VideoExample.

is the whole content of this article, I hope to help you, and hope that you can support a lot of scripting home.

you might be interested in this article:

storage and detailed examples of


This concludes the body part

This paper fixed link:http://www.script-home.com/the-method-of-full-screen-video-playing-by-react-native-video.html | Script Home | +Copy Link

Article reprint please specify:The method of full screen video playing by react-native-video | Script Home

You may also be interested in these articles!