react-native 视频播放器
-
react-native-tomatohut-player
简介
包装react-native-video,添加了部分自己需要的功能,对于没有开发的属性可以自己fork该项目去加,或者提出issue,有空我会写下(小声逼逼:小菜鸡一个,难的不会,简单的懒~)
只写了Android,IOS没看,应该都差不多,具体的自己调试(没有Mac也没法调试,有土豪的话可以给我捐一台,我不会介意的,哈哈哈)安装(windows)
npm install react-native-video@4.4.4 --save npm install react-native-linear-gradient --save npm install react-native-orientation --save npm install react-native-keep-awake --save npm install react-native-vector-icons --save npm install react-native-tomatohut-player --save echo D | xcopy node_modules\react-native-vector-icons\Fonts android\app\src\main\assets\fonts /e
功能
- 滑屏快进
- 全屏
- 开始时间
- 双击暂停
- 用的时候再写
截图
实例
import React, {Component} from 'react'; import Video from 'react-native-tomatohut-player'; export default class App extends Component{ render() { return ( <Video source={{uri: 'xxxx'}} themeColor={'red'} title={'哪吒'} // onFullScreen={(value) => console.log(value)} // startTime={1000} // onProgress={(event) => console.log(event)} /> ); } }
属性
名称 备注 source 资源路径(写法见react-native-video#source) themeColor 加载按钮与silder滑块颜色,见图 title 视频标题名称 startTime 视频开始时间 titleLeft 标题左边组件,可以放置一个后退图标 方法
名称 备注 onFullScreen 返回是否全屏(true为全屏) onProgress 返回播放参数(见react-native-video#onprogress)
-
这个播放器有几个小问题,1.播放结束时点击重新播放,最左边时间不重置,滑动条也不会回到起点,2.滑动时滚动条有时会自动跳到原来位置而不是跟着手指走,3.建议在跳转播放时增加个正在加载的图标
-
This post is deleted!
-
当第一次播放完后,点击重新重新播放,打印onProgress函数的data值发现竟然是空对象,这也就是为什么时间不重置的原因,可是为什么onProgress函数的data值是空呢??