ReactNative干货分享——视频播放器App

前文中我已经介绍过了react-native-video这个库并且用它实现了一个全屏播放的demo,基本上把实现全屏的原理讲解清楚了。本篇文章是在前作的基础上重新撰写一个简单的视频播放器App,分享并总结一下个人的经验。

播放器的UI参考了腾讯视频、爱奇艺等主流播放器,主要参照腾讯视频来实现。效果如下:

本播放器支持以下功能

  1. 可加载本地和远程视频地址
  2. 支持播放和暂停
  3. 支持横竖屏切换
  4. 横屏显示视频标题
  5. 静音功能
  6. 支持视频选集切换
  7. 横屏清晰度切换
  8. 横屏展示分享
  9. 调整音量
  10. 调整播放速率
  11. 适配iPhone X

第三方库

主要用到三个库,前两个是实现播放器功能必须的,导航库可任选。

  1. react-native-video

目前使用的就是这个库。最初是看到很多人都在问该怎么实现全屏播放,因为presentFullscreenPlayer并不支持Android,在研究了一下这个库之后想了想解决方案,就是我上篇文章说到的实现过程。这个视频播放器虽然还有很多问题,但还是可以用的,目前还没有发现哪个封装的react native播放器能比这个好多少。如果想要更好的性能、效果,最好还是基于原生自己实现、自己封装。

  1. react-native-orientation

能够强制屏幕旋转,监听屏幕旋转,使用简单方便。

  1. react-navigation

这个不必多说,JS实现的react native导航库,非常方便好用。react native导航库非常多,解决方案也都不错,看个人喜好选择。

细节总结

  1. CSS和flexbox布局的使用,必要时使用absolute的方式设置控件绝对位置。
  2. 通过改变播放器宽高实现全屏,部分控件的宽高也要随之改变才能正常显示。
  3. 使用Orientation强制屏幕旋转。
  4. 使用BackHandler监听安卓物理返回键的点击,横屏下点返回键回到竖屏,再次点击返回键返回到上个界面。
  5. DeviceInfoisIPhoneX_deprecated属性可用来判断是否是iPhone X,在非iPhone X的设备上,这个值为undefined。从这个属性名可以看出这个属性以后可能不会再用,推荐使用第三方的react-native-device-info 来获取设备信息再进行判断。
  6. iPhone X的适配,全屏播放时刘海部分要空出来,以免部分区域被刘海遮住,为了左右对称两边空出同样宽度的空间,宽度为刘海的高度,即iPhone X下状态栏的高度44。
  7. render中引用视频播放器时要注意控件的层级,显示在UI层最上层的控件在代码中最后引用,这点与原生UI没区别。
  8. 任何应用,UI层控件越多,必然会导致加载时开销更大,虽然由于设备性能越来越高我们可能感受不到影响,但在开发过程中还是需要极力避免。这也是本篇App中需要改进的地方。

TODO

  1. 视频截屏功能
  2. 改善UI组件代码,减少耦合
  3. 横屏可以锁定旋转和播放控制

代码地址:github.com/mrarronz/re…/Chapter8-MyVideoApp/MyVideoApp。喜欢的点个赞Star一下呗,谢谢关注。

关注下面的标签,发现更多相似文章
评论
说说你的看法