react-native实现一个简易的视频播放器

这篇博客主要是讲解结合react-native-video实现一个能够显示播放时长/总时长、支持拖拽进度、播放/暂停、切换全屏等基本功能的视频播放器。

1.所需依赖以及props

npm install react-native-video //播放视频 

npm install react-native-orientation //控制方向

image.png

2.获取视频时间信息 

 在onLoad时刻获取视频总时长,onProgress获取当前进度。

image.png

3.控制播放状态

切换状态、播放

image.png

4.控制视频进度

首先我们需要构建拖拽控件,这里使用的是react-native的slider组件。拖拽触发onValueChange回调来控制进度,通过videoRef的命令式控制视频播放时间,并且改变当前播放时间。

image.png

image.png

5.全屏切换

我们通过获取最外层视图的宽高来判断设备方向,如果宽大于高就改变设备方向为竖屏,反之则改变设备方向为横屏。

image.png

image.png

最终效果如下

竖屏效果

image.png

横屏效果

image.png

这便是react-native实现一个视频播放器的主要实现思路及方法,感谢阅读?。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容