React Native封装视频播放器组件

前言

videoPlayer视频播放器Demo是从作者前段时间开源的RN项目OneM中抽离出来的独立的Demo示例，如果想看完整的OneM项目请点击，Demo示例支持iOS、Android双平台运行。

预览效果图

gif

播放器支持功能

• 支持播放 \ 暂停
• 支持横竖屏切换
• 支持锁屏
• 支持缓存播放及缓存进度
• 支持播放进度拖拽到指定位置播放

使用到的技术点

• 项目使用到react-native-video媒体播放组件
• IconFont字体react-native-vector-icons，以及自定义的字体库
• 使用到react-native-orientation组件来完成横竖屏切换

核心代码

react-native-video 组件使用讲解

Android拓展用法

详细的react-native-video使用方法请参照官方文档：https://github.com/react-native-community/react-native-video

react-native-video组件使用步骤

• npm install react-native-video --save
• react-native link react-native-video --save

播放器Demo源码

https://github.com/guangqiang-liu/react-native-video-demo

查看IconFont功能请参考

自定义IconFont库

同时作者使用react-native-video组件也开源了一个音乐播放器Demo示例，有兴趣的同学也可以点击查看学习。

http://www.jianshu.com/p/7ddaf6ae9dd2

总结

视频播放器功能和作者开源的音乐播放器差不多，都是使用react-native-video组件进行封装的，很多地方的处理逻辑都是一样的，建议同学们两个示例项目结合着学习。如果感觉这篇文章对你有帮助 请 给个 star 给个关注 谢谢。

福利时间

• 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
• 作者主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
• 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！