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: 'http://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', }, });
<Video>
, adds custom controls and use the <Video>
API extensively. The videoplayer controls is used in this app.import { Video } from 'expo-av';
source
and posterSource
props customize the source of the video content.source
null
, or left blank, the video component will display nothing.ref
via loadAsync()
; see below or the AV documentation for further information.{ 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.posterSource
{ uri: 'http://path/to/file' }
with a network URL pointing to a image file on the web.require('path/to/file')
for an image file asset in the source code directory.posterStyle
useNativeControls
, resizeMode
, and usePoster
props customize the UI of the component.useNativeControls
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.resizeMode
Video.RESIZE_MODE_STRETCH
-- Stretch to fill component bounds.Video.RESIZE_MODE_CONTAIN
-- Fit within component bounds while preserving aspect ratio.Video.RESIZE_MODE_COVER
-- Fill component bounds while preserving aspect ratio.usePoster
true
, will display an image (whose source is set via the prop posterSource
) while the video is loading.onPlaybackStatusUpdate
, onReadyForDisplay
, and onIOSFullscreenUpdate
props pass information of the state of the Video
component. The onLoadStart
, onLoad
, and onError
props are also provided for backwards compatibility with Image
(but they are redundant with onPlaybackStatusUpdate
).onPlaybackStatusUpdate
PlaybackStatus
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.onReadyForDisplay
naturalSize
: a dictionary with the following key-value pairs:width
: a number describing the width in pixels of the video dataheight
: a number describing the height in pixels of the video dataorientation
: a string describing the natural orientation of the video data, either 'portrait'
or 'landscape'
status
: the PlaybackStatus
of the video; see the AV documentation for further information.onFullscreenUpdate
presentFullscreenPlayer()
and dismissFullscreenPlayer()
methods on the Video
's ref
).fullscreenUpdate
: a number taking one of the following values:Video.FULLSCREEN_UPDATE_PLAYER_WILL_PRESENT
: describing that the fullscreen player is about to presentVideo.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT
: describing that the fullscreen player just finished presentingVideo.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS
: describing that the fullscreen player is about to dismissVideo.FULLSCREEN_UPDATE_PLAYER_DID_DISMISS
: describing that the fullscreen player just finished dismissingstatus
: the PlaybackStatus
of the video; see the AV documentation for further information.onLoadStart
onLoad
PlaybackStatus
of the video as its parameter; see the AV documentation for further information.onError
playbackStatus.error
that are passed into the onPlaybackStatusUpdate
callback.ref
(described below and in the AV documentation) for finer control.status
PlaybackStatusToSet
on the video. See the AV documentation for more information on PlaybackStatusToSet
.progressUpdateIntervalMillis
onPlaybackStatusUpdate
. See the AV documentation for more information.positionMillis
shouldPlay
isPlaying
and isBuffering
properties of the PlaybackStatus
. See the AV documentation for more information.rate
0.0
and 32.0
. Only available on Android API version 23 and later and iOS. See the AV documentation for more information.shouldCorrectPitch
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.volume
0.0
(silence) and 1.0
(maximum volume). See the AV documentation for more information.isMuted
isLooping
false
) or loop indefinitely (true
). See the AV documentation for more information.videoRef.presentFullscreenPlayer()
useNativeControls
is set to false
, native controls will be visible in fullscreen mode.Promise
that is fulfilled with the PlaybackStatus
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.videoRef.dismissFullscreenPlayer()
Promise
that is fulfilled with the PlaybackStatus
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.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)