Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
expo-video-player
Advanced tools
Readme
Video wrappper component for Expo ecosystem built on top of the Expo's Video component. This library basically adds UI controls like in the YouTube app, which gives you the opportunity to play, pause, replay, change video position and a lot of styling options.
The package has a lot of configuration options to fit all your needs. Only source
in videoProps: { source: {} }
is required. Check the Props table below.
For compatibility information, scroll down to Compatibility. The FAQ is here
If you are updating from version 1.x to 2.x, there are some breaking changes in the API. Please visit Migration guide to version 2 to make your transition as easy as possible. In version 2.x @react-native-community/netinfo has been removed.
yarn add expo-video-player
or npm install expo-video-player
expo-av
and @react-native-community/slider
. Install them with expo-cli
(expo install expo-av @react-native-community/slider
)The showcase of some of the possibilities you can create is in the folder example-app. There is Fullscreen, ref, local file, custom icons, styling...
Minimal code to make VideoPlayer
working
import { ResizeMode } from 'expo-av'
import VideoPlayer from 'expo-video-player'
<VideoPlayer
videoProps={{
shouldPlay: true,
resizeMode: ResizeMode.CONTAIN,
// ❗ source is required https://docs.expo.io/versions/latest/sdk/video/#props
source: {
uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
},
}}
/>
For default prop values, please visit /lib/props.tsx
Property | Type | Description |
---|---|---|
videoProps | VideoProps | At least source is required |
errorCallback | (error: ErrorType) => void | Function which is fired when an error occurs |
playbackCallback | (status: AVPlaybackStatus) => void | Function which is fired every time onPlaybackStatusUpdate occurs |
defaultControlsVisible | boolean | Show controls on darker overlay when video starts playing. Default is false |
timeVisible | boolean | Show current time and final length in the bottom. Default is true |
textStyle | TextStyle | Object containing <Text /> styling |
slider | { visible?: boolean } & SliderProps | Object containing any of @react-native-community/slider props. Your styling may break default layout. Also hide slider by providing visible: false prop. You are unable to overwrite ref , value , onSlidingStart and onSlidingComplete |
activityIndicator | ActivityIndicatorProps | Any values from ActivityIndicator |
animation | { fadeInDuration?: number, fadeOutDuration?: number } | Duration of animations in milliseconds |
style | { width?: number, height?: number, videoBackgroundColor?: ColorValue, controlsBackgroundColor?: ColorValue } | Basic styling of <VideoPlayer /> |
icon | { size?: number, color?: ColorValue, style?: TextStyle, pause?: JSX.Element, play?: JSX.Element, replay?: JSX.Element, fullscreen?: JSX.Element, exitFullscreen?: JSX.Element, mute?: JSX.Element, exitMute?: JSX.Element } | Icon styling. Check more in the example-app |
fullscreen | { enterFullscreen?: () => void, exitFullscreen?: () => void, inFullscreen?: boolean, visible?: boolean } | Usage of Fullscreen mode is in the example-app |
autoHidePlayer | boolean | Prevent player from hiding after certain time, by setting it to false you need to tap the screen again to hide the player. Default is true |
header | ReactNode | Render header component same as in YouTube app. Default undefined |
mute | { enterMute?: () => void, exitMute?: () => void, isMute?: boolean, visible?: boolean } | Usage of mute mode is in the example-app |
Library version | Expo SDK version |
---|---|
2.1.x | >= SDK 45 |
2.x.x | >= SDK 38 |
1.6.x | >= SDK 38 |
1.5.x | >= SDK 34 |
1.4.x | >= SDK 34 |
1.3.x | >= SDK 34 |
1.2.x | >= SDK 33 |
1.1.x | >= SDK 32 |
1.x.x | >= SDK 32 |
Changelog added in version 1.3.0 Read CHANGELOG.md
FAQs
Customizable Video Player controls for Expo
The npm package expo-video-player receives a total of 1,571 weekly downloads. As such, expo-video-player popularity was classified as popular.
We found that expo-video-player demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.