cornedor / React Native Video Player
Licence: mit
A video player for React Native with controls
Stars: ✭ 415
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Video Player
Vue Plyr
A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.
Stars: ✭ 531 (+27.95%)
Mutual labels: hacktoberfest, video-player
Staged Recipes
A place to submit conda recipes before they become fully fledged conda-forge feedstocks
Stars: ✭ 415 (+0%)
Mutual labels: hacktoberfest
Gorgonia
Gorgonia is a library that helps facilitate machine learning in Go.
Stars: ✭ 4,295 (+934.94%)
Mutual labels: hacktoberfest
Ember Intl
Localization library for any Ember Application or Addon
Stars: ✭ 412 (-0.72%)
Mutual labels: hacktoberfest
Phpinsights
🔰 Instant PHP quality checks from your console
Stars: ✭ 4,442 (+970.36%)
Mutual labels: hacktoberfest
Wordpress Plugin Boilerplate Powered
Wordpress Plugin Boilerplate but Powered with examples and a generator!
Stars: ✭ 413 (-0.48%)
Mutual labels: hacktoberfest
Yatopia
The Most Powerful and Feature Rich Minecraft Server Software!
Stars: ✭ 408 (-1.69%)
Mutual labels: hacktoberfest
Curriculum
The curriculum of Techtonica, a free tech training and job placement program for women and non-binary adults with low incomes.
Stars: ✭ 414 (-0.24%)
Mutual labels: hacktoberfest
Github Dark Theme
GitHub Dark Theme - Extension for Chrome, Firefox, and Microsoft Edge
Stars: ✭ 413 (-0.48%)
Mutual labels: hacktoberfest
Rector
Instant Upgrades and Automated Refactoring of any PHP 5.3+ code
Stars: ✭ 4,739 (+1041.93%)
Mutual labels: hacktoberfest
Strongbox
Strongbox is an artifact repository manager.
Stars: ✭ 412 (-0.72%)
Mutual labels: hacktoberfest
Efqrcode
A better way to operate QR Code in Swift, support iOS, macOS, watchOS and tvOS.
Stars: ✭ 4,121 (+893.01%)
Mutual labels: hacktoberfest
Cornerstonetools
A framework for tools built on top of Cornerstone.
Stars: ✭ 411 (-0.96%)
Mutual labels: hacktoberfest
Enterprise gateway
A lightweight, multi-tenant, scalable and secure gateway that enables Jupyter Notebooks to share resources across distributed clusters such as Apache Spark, Kubernetes and others.
Stars: ✭ 412 (-0.72%)
Mutual labels: hacktoberfest
Sp Dev Fx Extensions
Code samples and developer content targeted towards SharePoint Framework client-side extensions. https://aka.ms/spfx-extensions
Stars: ✭ 416 (+0.24%)
Mutual labels: hacktoberfest
React Native Video Player
A React Native video player with a few controls. This player uses react-native-video for the video playback.
Installation
yarn add react-native-video-player react-native-video react-native-vector-icons
or
npm install --save react-native-video-player react-native-video react-native-vector-icons
Then, for React Native >= 0.60:
cd ios
pod install
Add the following at the beginning of ./android/app/build.gradle
on Android (required for react-native-vector-icons
to work):
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
Add the following in your Info.plist
file on iOS (required for react-native-vector-icons
to work):
<key>UIAppFonts</key>
<array>
<string>MaterialIcons.ttf</string>
</array>
For React Native < 0.60
react-native link react-native-video
react-native link react-native-vector-icons
Example
<VideoPlayer
video={{ uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }}
videoWidth={1600}
videoHeight={900}
thumbnail={{ uri: 'https://i.picsum.photos/id/866/1600/900.jpg' }}
/>
Props
Prop | Description |
---|---|
video | The video source to pass to react-native-video. |
thumbnail | An Image source to use as thumbnail before the video gets loaded. |
endThumbnail | An Image source to use as thumbnail after the video has ended. |
videoWidth | Width of the video to calculate the player size. |
videoHeight | Height of the video to calculate the player size. |
duration | Duration can not always be figured out (e.g. when using hls), this can be used as fallback. |
autoplay | Start the video automatically. |
defaultMuted | Start the video muted, but allow toggling. |
muted | Start the video muted and hide the mute toggle button. |
controlsTimeout | Timeout when to hide the controls. |
disableControlsAutoHide | Disable auto hiding the controls. |
disableFullscreen | Disable the fullscreen button. |
loop | Loop the video after playback is done. |
resizeMode | The video's resizeMode. defaults to contain and is passed to react-native-video. |
hideControlsOnStart | Hides the controls on start video. |
endWithThumbnail | Returns to the thumbnail after the video ends. If an endThumbnail image is not specified then the image specified in thumbnail is shown. |
disableSeek | Disable video seeking. |
pauseOnPress | Automatically pause/play when pressing the video player anywhere. |
fullScreenOnLongPress | Automatically show video on fullscreen when doing a long press. |
onStart | Callback for when the start button is pressed. |
onPlayPress | Callback for when the play button is pressed. |
onHideControls | Callback for when the controls are being hide. |
onShowControls | Callback for when the controls are being shown. |
customStyles | The player can be customized in this object, see customStyles for the options. |
All other props are passed to the react-native-video component.
customStyles
- wrapper
- video
- controls
- playControl
- controlButton
- controlIcon
- playIcon
- seekBar
- seekBarFullWidth
- seekBarProgress
- seekBarKnob
- seekBarBackground
- thumbnail
- playButton
- playArrow
- videoWrapper
Methods
Method | Props | Description |
---|---|---|
seek | time: float | Seek the player to the given time. |
stop | Stop the playback and reset back to 0:00. | |
pause | Pause the playback. | |
resume | Resume the playback. |
Future features
- [X] Make seek bar seekable.
- [x] Make player customizable.
- [ ] Add volume control
- [X] Add fullscreen button
- [ ] Add fullscreen button for Android (See PR #38 if you need fullscreen in Android)
- [ ] Add loader
- [ ] Add video duration/play time
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].