react+native+video makes full screen effect-JS Tutorial-php.cn

This time I will bring you the full-screen effect of react native video. What are the precautions for making full-screen effect of react native video? The following is a practical case, let’s take a look.

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 how to use react-native-video to play videos and how to achieve full-screen playback. When the screen is rotated, the size of the video player will be adjusted to display full screen or collapse full screen.

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

Basic functions

Control the playback rate
Control the volume
Support mute function
Support play and pause
Support background audio playback
Support customized styles, such as setting width and height
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.
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.
Support jump progress, use the seek method to jump to the specified place for playback
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}}

Copy after login

When playing local videos, the usage method is as follows:

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

Copy after login

It should be noted that the source attribute cannot be empty, and the 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={'cover'}
 playWhenInactive={false}
 playInBackground={false}
 ignoreSilentSwitch={'ignore'}
 progressUpdateInterval={250.0}
 style={{width: this.state.videoWidth, height: this.state.videoHeight}}
/>

Copy after login

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.

刚开始我想到的办法是使用 react-native-orientation 监听设备转屏的事件，在回调方法中判断当前是横屏还是竖屏，这个在iOS上是可行的，但是在Android上横屏和竖屏时获取到宽高值总是不匹配的（比如，横屏宽384高582，竖屏宽582高384，显然不合理），这样就无法做到统一处理。

所以，监听转屏的方案是不行的，不仅费时还得不到想要的结果。更好的方案是在render函数中使用View作为最底层容器，给它设置一个"flex：1"的样式，使其充满屏幕，在View的onLayout方法中获取它的宽高。无论屏幕怎么旋转，onLayout都可以获取到当前View的宽高和x、y坐标。

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

Copy after login

这样就实现了屏幕在旋转时视频也随之改变大小，横屏时全屏播放，竖屏回归正常播放。注意，Android和iOS需要配置转屏功能才能使界面自动旋转，请自行查阅相关配置方法。

播放控制

上面实现了全屏播放还不够，我们还需要一个工具栏来控制视频的播放，比如显示进度，播放暂停和全屏按钮。具体思路如下：

使用一个View将Video组件包裹起来，View的宽高和Video一致，便于转屏时改变大小
设置一个透明的遮罩层覆盖在Video组件上，点击遮罩层显示或隐藏工具栏
工具栏中要显示播放按钮、进度条、全屏按钮、当前播放时间、视频总时长。工具栏以绝对位置布局，覆盖在Video组件底部
使用react-native-orientation中的lockToPortrait和lockToLandscape方法强制旋转屏幕，使用unlockAllOrientations在屏幕旋转以后撤销转屏限制。

这样才算是一个有模有样的视频播放器。下面是竖屏和横屏的效果图