I created this basic video player based on curiosity on how video custom controls works in react native. The expo video library has controls (useNativeControls
) but you might want to customize it. So this is basically a practice project and also playing around how to implement custom video controls in the social media app me and my people are building.
Here are some articles that helped me:
- https://medium.com/timeless/creating-a-precision-slider-volume-interaction-part-ii-36525d200b52
- https://medium.com/@rahulchowdhury_69408/mastering-expo-video-creating-custom-video-controls-for-a-seamless-user-experience-7f63d40c967
Here are some screenshots of the app:
First Image | Second Image | Third Image |
---|---|---|
To run it locally, clone the repo and run npm install
. Then run npm start
- If the video selected to play is vertical video, the video might cover the screen vertically and the bottom controls might not show
- The animation for reducing volume is a bit laggy as the gesture handler runs on the js thread
- Works well with only mp4 videos
- Selecting videos with large file size takes a while to load
- Video duration might be incorrect
- During playback or while pausing and playing video, the volume indicator is being reset