react-native-video实现视频全屏播放的⽅法
是github上⼀个专⽤于React Native做视频播放的组件。这个组件是React Native上功能最全最好⽤的视频播放组件，还在持续开发之中，虽然还有些bug，但基本不影响使⽤，强⼒推荐。
本篇⽂章主要介绍下怎么使⽤react-native-video播放视频，以及如何实现全屏播放，屏幕旋转时视频播放器⼤⼩随之调整，显⽰全屏或收起全屏。
⾸先来看看react-native-video有哪些功能。
基本功能
1. 控制播放速率
2. 控制⾳量⼤⼩
3. ⽀持静⾳功能
4. ⽀持播放和暂停
5. ⽀持后台⾳频播放
6. ⽀持定制样式，⽐如设置宽⾼
7. 丰富的事件调⽤，如onLoad，onEnd，onProgress，onBuffer等等，可以通过对应的事件进⾏UI上的定制处理，如
onBuffer时我们可以显⽰⼀个进度条提⽰⽤户视频正在缓冲。
8. ⽀持全屏播放，使⽤presentFullscreenPlayer⽅法。这个⽅法在iOS上可⾏，在android上不起作⽤。参看issue#534
，#726也是同样的问题。
9. ⽀持跳转进度，使⽤seek⽅法跳转到指定的地⽅进⾏播放
10. 可以加载远程视频地址进⾏播放，也可以加载RN本地存放的视频。
注意事项
react-native-video通过source属性设置视频，播放远程视频时使⽤uri来设置视频地址，如下：
source={{uri: /xxx/xxx/xxx.mp4}}
播放本地视频时，使⽤⽅式如下：
source={require('../assets/video/turntable.mp4')}
需要注意的是，source属性不能为空，uri或本地资源是必须要设置的，否则会导致app闪退。uri不能设置为空字符串，必须是⼀个具体的地址。
安装配置
使⽤ npm i -S react-native-video 或 yarn add react-native-video 安装，完成之后使⽤ react-native link react-native-video 命令link这个库。
Android端在执⾏完link命令后，gradle中就已经完成了配置。iOS端还需要⼿动配置⼀下，这⾥简单说⼀下，与官⽅说明不同的是，我们⼀般不使⽤tvOS的，选中你⾃⼰的target，在build phases中先移除掉⾃动link进来的 libRCTVideo.a 这个库，然后点击下⽅加号重新添加 libRCTVideo.a ，注意不要选错。
视频播放
实现视频播放其实很简单，我们只需要给Video组件设置⼀下source资源，然后设置style调整Video组件宽⾼就⾏了。
reactnativeui框架
<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是我们⽤来设置视频地址的变量，videoWidth和videoHeight是⽤来控制视频宽⾼的。
全屏播放的实现
视频全屏播放其实就是在横屏情况下全屏播放，竖屏⼀般都是⾮全屏的。要实现设备横屏时视频全屏显⽰，说起来很简单，就是通过改变Video组件宽⾼来实现。
上⾯我们把videoWidth和videoHeight存放在state中，⽬的就是为了通过改变两个变量的值来刷新UI，使视频宽⾼能随之改变。问题是，怎样在设备的屏幕旋转时及时获取到改变后的宽⾼呢？
竖屏时我设置的视频初始宽度为设备屏幕的宽度，⾼度为宽度的9/16，即按16：9的⽐例显⽰。横屏时视频的宽度应为屏幕的宽度，⾼度应为当前屏幕的⾼度。由于横屏时设备宽⾼发⽣了变化，及时获取到宽⾼就能及时刷新UI，视频就能全屏展⽰了。
刚开始我想到的办法是使⽤监听设备转屏的事件，在回调⽅法中判断当前是横屏还是竖屏，这个在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,
})
}
};
这样就实现了屏幕在旋转时视频也随之改变⼤⼩，横屏时全屏播放，竖屏回归正常播放。注意，Android和iOS需要配置转屏功能才能使界⾯⾃动旋转，请⾃⾏查阅相关配置⽅法。
播放控制
上⾯实现了全屏播放还不够，我们还需要⼀个⼯具栏来控制视频的播放，⽐如显⽰进度，播放暂停和全屏按钮。具体思路如下：
1. 使⽤⼀个View将Video组件包裹起来，View的宽⾼和Video⼀致，便于转屏时改变⼤⼩
2. 设置⼀个透明的遮罩层覆盖在Video组件上，点击遮罩层显⽰或隐藏⼯具栏
3. ⼯具栏中要显⽰播放按钮、进度条、全屏按钮、当前播放时间、视频总时长。⼯具栏以绝对位置布局，覆盖在Video组
件底部
4. 使⽤react-native-orientation中的lockToPortrait和lockToLandscape⽅法强制旋转屏幕，使⽤unlockAllOrientations在屏
幕旋转以后撤销转屏限制。
这样才算是⼀个有模有样的视频播放器。下⾯是竖屏和横屏的效果图
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。