是github上一个专用于react native做视频播放的组件。这个组件是react native上功能最全最好用的视频播放组件,还在持续开发之中,虽然还有些bug,但基本不影响使用,强力推荐。
本篇文章主要介绍下怎么使用react-native-video播放视频,以及如何实现全屏播放,屏幕旋转时视频播放器大小随之调整,显示全屏或收起全屏。
首先来看看react-native-video有哪些功能。
基本功能
注意事项
react-native-video通过source属性设置视频,播放远程视频时使用uri来设置视频地址,如下:
source={{uri: http://www.xxx.com/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组件宽高就行了。
<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需要配置转屏功能才能使界面自动旋转,请自行查阅相关配置方法。
播放控制
上面实现了全屏播放还不够,我们还需要一个工具栏来控制视频的播放,比如显示进度,播放暂停和全屏按钮。具体思路如下:
这样才算是一个有模有样的视频播放器。下面是竖屏和横屏的效果图
再也不必为presentfullscreenplayer方法不起作用而烦恼了,全屏播放实现起来其实很简单。具体代码请看demo: https://github.com/mrarronz/react-native-blog-examples/tree/master/chapter7-videoplayer/videoexample 。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
2020-07-21 html5如何监听veido的全屏 + css的字体间距 + JS的window.open() + 软技能svn与git
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(二)
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件
网友评论