A-ANing / react-native-rn-videoplayer

基于react-native-video的视频播放器(上下滑动改变音量屏幕亮度,缓冲进度,双击暂停等ios Android)
95 stars 40 forks source link

如果能在加个播放速率,那就简直完美了 #17

Open wulaizi opened 4 years ago

wulaizi commented 4 years ago

这个组件非常符合我的需求 1、就是差个播放速率(像短视频可能不需要),像教学课程这种一般学生都喜欢快进的看 (可能会面临大家的播放速率不一样 0.7 ,1, 1.5 ,2这种 ) 2、还有个是vip展示页 有的需求是播放到几分钟(只免费几分钟) 就要求停止播放了 要求开通会员 (作者好像在里面有实现,只是把那个组件删了,其实可以提供一个自定义方法 方便自定义布局) {(showOpenVip && this.props.VIPCONTS) ? this.props?.showNoVipView() : null } 还有一种是播放视频个数,比如用户 一天只能免费3个视频 这一天就只能显示那个开通会员的页面了,和上面的有点不一样,上面的是播放中,后者是一开始就不给播放 只是展示个自定义界面。 作者真是用心了

A-ANing commented 4 years ago

你这些需求其实我在做项目的时候都考虑到了的; 我也是自己的项目需要播放器,做着做着发现一个播放器的代码量比较大,我才搞了个包,方便以后使用;

1,2我不忙了给搞出来吧 最近在学习flutter;

视频播放个数限制那个很简单,我的app也有这个功能,当播放次数已用完,可以不显示video组件,给一个图放那,图上左上角放一个返回按钮,我就是这样做的,至于图的大小,你可以看我这个视频分辨率大小来设置

wulaizi commented 4 years ago

你这些需求其实我在做项目的时候都考虑到了的; 我也是自己的项目需要播放器,做着做着发现一个播放器的代码量比较大,我才搞了个包,方便以后使用;

1,2我不忙了给搞出来吧 最近在学习flutter;

视频播放个数限制那个很简单,我的app也有这个功能,当播放次数已用完,可以不显示video组件,给一个图放那,图上左上角放一个返回按钮,我就是这样做的,至于图的大小,你可以看我这个视频分辨率大小来设置

嗯 图片哪个我这边解决了,播放速率,我之前的播放器是有的,项目上线了也很久了,这次是重构,看到播放器代码很多,所以还是打算找一个,你的封装就非常的符合我的需求,这样省去了很多的代码,这边打算把你的fork一个,加个播放速率

A-ANing commented 4 years ago

可以,我这边代码质量不行,勉强看下,赶项目进度,业余时间少,又没mac,只能在公司的时候写一写

orzhtml commented 3 years ago

需要这样的功能+1

wulaizi commented 3 years ago

可以,我这边代码质量不行,勉强看下,赶项目进度,业余时间少,又没mac,只能在公司的时候写一写

需要这样的功能+1

这个需求我做了的 其实作者已经起了个好头 哪个视频 选集 就已经给 播放速率给出了方案 模仿着 加一个遮罩即可 选择的速率赋值给播放器即可

A-ANing commented 3 years ago

@wulaizi pr一波? 我又忙起来了 在做一个rn项目

wulaizi commented 3 years ago

@wulaizi pr一波? 我又忙起来了 在做一个rn项目 我把依赖拉倒本地了 不好推过来 我用的自己的组件 在 renderAllSeenList 下面添加 { this.state.showVideoRateModal ? <RateModal {...this.state} ref={(ref) => this.RateModalRef = ref} callBack={(videoRate: any) => { this.setState({ videoRate }) }} /> : null } 在 RNVideoPlayerComponent里面加个类 `export class RateModal extends Component { constructor(props) { super(props) this.state = { currentSelected: this.props.videoRate || 1 } } render() { const { callBack } = this.props; const SPEED_OPTIONS = [ { title: '0.7X', value: 0.7 }, { title: '1.0X', value: 1 }, { title: '1.5X', value: 1.5 }, { title: '2.0X', value: 2 }] return (<View style={{ width: deviceHeight / 4, backgroundColor: 'rgba(0,0,0,.6)', position: "absolute", top: 0, bottom: 0, right: 0, paddingHorizontal: 30, }}

{ SPEED_OPTIONS.map(item => ( <Row center fill key={item?.title} onPress={() => { this.setState({ currentSelected: item?.value }, () => { callBack && callBack(item.value) }) }}> <Label fontSize={18} type={item.value == this.state?.currentSelected ? "orange" : "white"}> {item.title} ) ) } ) } }` 把选中的数据传出去 赋值 给video 加个 rate={this.state.videoRate} 没有仔细测试过,不知道有没有问题 其他的 涉及到关闭 功能栏哪些 和 showChangeList 他的即可

A-ANing commented 3 years ago

v2.2.10 新增了 长按左右两边 快进 快退 返回按钮旁边展示视频名称等