This component provides video playback capabilities, presenting optional controls for play, pause, etc.
To install: npm install reactxp-video
// Used to return progress information in the onProgress callback
interface VideoProgress {
currentTime: number;
playableDuration: number;
atValue?: number;
target?: number;
atTimeScale?: number;
}
// Used to return information about the video once its metadata
// has been loaded; returned by the onLoadedData callback
interface VideoInfo {
duration?: number;
naturalSize?: {
width: number;
height: number;
};
}
// Alternate text to display if the image cannot be loaded
// or by screen readers
accessibilityLabel: string = undefined;
// Authentication token to include in request (not supported
// on some React Native implementations)
authToken: string = undefined;
// Should video playback loop to beginning after it completes?
loop: boolean = false;
// Called when the video is paused for buffering
onBuffer: () => void = undefined;
// Called when enough of the video has been loaded that playback
// is possible
onCanPlay: () => void = undefined;
// Called when enough of the video has been loaded that playback
// can proceed all the way to the end without buffering pauses
onCanPlayThrough: () => void = undefined;
// Called when the video playback reaches the end
onEnded: () => void = undefined;
// Called when the video cannot be loaded
onError: () => void = undefined;
// Called when the video's metadata has been loaded; returns
// information about the video
onLoadedData: (info: VideoInfo) => void = undefined;
// Called when the video data is starting to load
onLoadStart: () => void = undefined;
// Called periodically when the video is playing; reports
// progress information
onProgress: (progress: VideoProgress) => void = undefined;
// Indiciates which portion of the video should be pre-loaded
// when the component is mounted
preload: 'auto'|'metadata'|'none' = 'none';
// Determines how to resize the image if its natural size
// does not match the size of the container
resizeMode: 'contain'|'cover'|'stretch' = 'contain';
// Displays controls for play, pause, etc.
showControls: boolean = false;
// Source of video (URL) or resource `id` as resolved by `require()` for `react-native` targets.
source: string | number;
// See below for supported styles
style: ViewStyleRuleSet | ViewStyleRuleSet[] = [];
// Mutes or unmutes the sound for the video
mute(muted: boolean): void;
// Pauses the video
pause(): void;
// Plays the video at its current position
play(): void;
// Seeks to the specified position (specified in seconds)
seek(position: number): void;
return (
<RX.Video
source={ 'http://mydomain.com/coolvideo.mp4' }
/>
);