Video
component from expo-av
displays a video inline with the other UI elements in your app.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install expo-av
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import * as React from 'react'; import { View, StyleSheet, Button } from 'react-native'; import { Video, AVPlaybackStatus } from 'expo-av'; export default function App() { const video = React.useRef(null); const [status, setStatus] = React.useState({}); return ( <View style={styles.container}> <Video ref={video} style={styles.video} source={{ uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4', }} useNativeControls resizeMode="contain" isLooping onPlaybackStatusUpdate={status => setStatus(() => status)} /> <View style={styles.buttons}> <Button title={status.isPlaying ? 'Pause' : 'Play'} onPress={() => status.isPlaying ? video.current.pauseAsync() : video.current.playAsync() } /> </View> </View> ); } %%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor: '#ecf0f1', }, video: { alignSelf: 'center', width: 320, height: 200, }, buttons: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, });
VideoPlayer
controls component that wraps <Video>
, adds custom controls and use the <Video>
API extensively. The VideoPlayer
controls is used in this app.import { Video } from 'expo-av';
Type: Component<VideoProps, VideoState>
The Video component props can be divided into following groups:
source
and posterSource
props customize the source of the video content.useNativeControls
, resizeMode
, and usePoster
props customize the UI of the component.onPlaybackStatusUpdate
, onReadyForDisplay
, and onIOSFullscreenUpdate
props pass information of the state of the Video
component.onLoadStart
, onLoad
, and onError
props are also provided for backwards compatibility with Image
(but they are redundant with onPlaybackStatusUpdate
).Finally, the rest of props are available to control the playback of the video, but we recommend that, for finer control, you use the methods
available on the ref
described in the AV documentation.
Optional • Type: boolean
A boolean describing if the media should play once (false
) or loop indefinitely (true
).
See the AV documentation for more information.
Optional • Type: boolean
A boolean describing if the audio of this media should be muted. See the AV documentation for more information.
Optional • Type: number
The desired position of playback in milliseconds. See the AV documentation for more information.
Optional • Type: ImageProps['source']
The source of an optional image to display over the video while it is loading. The following forms are supported:
{ uri: 'http://path/to/file' }
with a network URL pointing to an image file on the web.require('path/to/file')
for an image file asset in the source code directory.Optional • Type: ImageProps['style']
An optional property to pass custom styles to the poster image.
Optional • Type: number
A number describing the new minimum interval in milliseconds between calls of onPlaybackStatusUpdate
.
See the AV documentation for more information.
Optional • Type: number
The desired playback rate of the media. This value must be between 0.0
and 32.0
. Only available on Android API version 23 and later and iOS.
See the AV documentation for more information.
Optional • Type: ResizeMode
A string describing how the video should be scaled for display in the component view bounds.
Must be one of the ResizeMode
enum values.
Optional • Type: boolean
A boolean describing if we should correct the pitch for a changed rate. If set to true
, the pitch of the audio will be corrected
(so a rate different than 1.0
will timestretch the audio).
See the AV documentation for more information.
Optional • Type: boolean
A boolean describing if the media is supposed to play. Playback may not start immediately after setting this value for reasons such as buffering.
Make sure to update your UI based on the isPlaying
and isBuffering
properties of the AVPlaybackStatus
.
See the AV documentation for more information.
Optional • Type: AVPlaybackSource
The source of the video data to display. If this prop is null
, or left blank, the video component will display nothing.
Note that this can also be set on the ref
via loadAsync()
. See below or the AV documentation for further information.
The following forms for the source are supported:
{ uri: string, headers?: { [string]: string }, overrideFileExtensionAndroid?: string }
with a network URL
pointing to a video file on the web, an optional headers object passed in a network request to the uri
and an optional
Android-specific overrideFileExtensionAndroid
string overriding extension inferred from the URL.
The overrideFileExtensionAndroid
property may come in handy if the player receives an URL like example.com/play
which redirects
to example.com/player.m3u8
. Setting this property to m3u8
would allow the Android player to properly infer the content type
of the media and use proper media file reader.require('path/to/file')
for a video file asset in the source code directory.Asset
object for a video file asset.See:
- The Android developer documentation lists of the video formats supported on Android.
- The iOS developer documentation lists of the video formats supported on iOS.
Optional • Type: AVPlaybackStatusToSet
A dictionary setting a new AVPlaybackStatusToSet
on the video.
See the AV documentation for more information on AVPlaybackStatusToSet
.
Optional • Type: boolean
A boolean which, if set to true
, will display native playback controls (such as play and pause) within the Video
component.
If you'd prefer to use custom controls, you can write them yourself, and/or check out the VideoPlayer
component.
Optional • Type: boolean
A boolean which, if set to true
, will display an image (whose source is set via the prop posterSource
) while the video is loading.
Optional • Type: number
The desired volume of the audio for this media. This value must be between 0.0
(silence) and 1.0
(maximum volume).
See the AV documentation for more information.
Optional • Type: (error: string) => void
A function to be called if load or playback have encountered a fatal error. The function is passed a single error message string as a parameter.
Errors sent here are also set on playbackStatus.error
that are passed into the onPlaybackStatusUpdate
callback.
Optional • Type: (event: VideoFullscreenUpdateEvent) => void
A function to be called when the state of the native iOS fullscreen view changes (controlled via the presentFullscreenPlayer()
and dismissFullscreenPlayer()
methods on the Video
's ref
).
Optional • Type: (status: AVPlaybackStatus) => void
A function to be called once the video has been loaded. The data is streamed so all of it may not have been fetched yet, just enough to render the first frame.
The function is called with the AVPlaybackStatus
of the video as its parameter. See the AV documentation for further information.
Optional • Type: () => void
A function to be called when the video begins to be loaded into memory. Called without any arguments.
Optional • Type: (status: AVPlaybackStatus) => void
A function to be called regularly with the AVPlaybackStatus
of the video. You will likely be using this a lot.
See the AV documentation for further information on onPlaybackStatusUpdate
, and the interval at which it is called.
Optional • Type: (event: VideoReadyForDisplayEvent) => void
A function to be called when the video is ready for display. Note that this function gets called whenever the video's natural size changes.
This dismisses the fullscreen video view.
A Promise
that is fulfilled with the AVPlaybackStatus
of the video once the fullscreen player has finished dismissing,
or rejects if there was an error, or if this was called on an Android device.
This presents a fullscreen view of your video component on top of your app's UI. Note that even if useNativeControls
is set to false
,
native controls will be visible in fullscreen mode.
A Promise
that is fulfilled with the AVPlaybackStatus
of the video once the fullscreen player has finished presenting,
or rejects if there was an error, or if this was called on an Android device.
Name | Type | Description |
---|---|---|
fullscreenUpdate | VideoFullscreenUpdate | The kind of the fullscreen update. |
status (optional) | AVPlaybackStatus | The AVPlaybackStatus of the video. See the AV documentation for further information. |
Name | Type | Description |
---|---|---|
height | number | A number describing the height in pixels of the video data. |
orientation | 'portrait' | 'landscape' | A string describing the natural orientation of the video data. |
width | number | A number describing the width in pixels of the video data. |
Name | Type | Description |
---|---|---|
naturalSize | VideoNaturalSize | An object containing the basic data about video size. |
status (optional) | AVPlaybackStatus | The AVPlaybackStatus of the video. See the AV documentation for further information. |
Name | Type | Description |
---|---|---|
showPoster | boolean | - |
CONTAIN
- Fit within component bounds while preserving aspect ratio.ResizeMode.CONTAIN = "contain"
COVER
- Fill component bounds while preserving aspect ratio.ResizeMode.COVER = "cover"
STRETCH
- Stretch to fill component bounds.ResizeMode.STRETCH = "stretch"
PLAYER_WILL_PRESENT
- Describing that the fullscreen player is about to present.VideoFullscreenUpdate.PLAYER_WILL_PRESENT = 0
PLAYER_DID_PRESENT
- Describing that the fullscreen player just finished presenting.VideoFullscreenUpdate.PLAYER_DID_PRESENT = 1
PLAYER_WILL_DISMISS
- Describing that the fullscreen player is about to dismiss.VideoFullscreenUpdate.PLAYER_WILL_DISMISS = 2
PLAYER_DID_DISMISS
- Describing that the fullscreen player just finished dismissing.VideoFullscreenUpdate.PLAYER_DID_DISMISS = 3
Video
component ref
is the same as the API for Audio.Sound
- see the AV documentation for further information:videoRef.loadAsync(source, initialStatus = {}, downloadFirst = true)
videoRef.unloadAsync()
videoRef.getStatusAsync()
videoRef.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate)
videoRef.setStatusAsync(statusToSet)
videoRef.playAsync()
videoRef.replayAsync()
videoRef.pauseAsync()
videoRef.stopAsync()
videoRef.setPositionAsync(millis)
videoRef.setRateAsync(value, shouldCorrectPitch, pitchCorrectionQuality)
videoRef.setVolumeAsync(value)
videoRef.setIsMutedAsync(value)
videoRef.setIsLoopingAsync(value)
videoRef.setProgressUpdateIntervalAsync(millis)