Expo 视频（expo-av）
一个提供 API 用于在应用中实现视频播放和录制的库。
For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.
expo-av 中的 Video 组件会将视频以内联方式显示在应用中的其他 UI 元素旁边。
Video 和 Audio 的许多 API 是通用的，相关文档请参见 AV 文档。本页介绍的是视频特有的属性和 API。我们建议你先快速浏览本文档，以便让基础视频功能正常工作，然后再前往 AV 文档 了解更高级的功能。视频的音频体验（例如是否打断另一个应用中正在播放的音乐，或者在手机处于静音模式时是否播放声音）可以使用 Audio API 进行自定义。
安装
- npx expo install expo-avIf you are installing this in an existing React Native app, make sure to install expo in your project.
用法
下面是一个带有播放/暂停按钮的视频简单示例。
import { useState, useRef } from 'react'; import { View, StyleSheet, Button } from 'react-native'; import { Video, ResizeMode } from 'expo-av'; export default function App() { const video = useRef(null); const [status, setStatus] = useState({}); return ( <View style={styles.container}> <Video ref={video} style={styles.video} source={{ uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', }} useNativeControls resizeMode={ResizeMode.CONTAIN} isLooping onPlaybackStatusUpdate={status => setStatus(() => status)} /> <View style={styles.buttons}> <Button title={status.isPlaying ? '暂停' : '播放'} 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', }, });
如需更多高级示例，请查看 Playlist 示例，以及封装了 <Video>、添加自定义控制并广泛使用 <Video> API 的 自定义 VideoPlayer 控制组件。VideoPlayer 控件在 这个应用 中使用。
API
import { Video } from 'expo-av';
Component
Type: React.Component<VideoProps, VideoState>
The Video component props can be divided into following groups:
- The
sourceandposterSourceprops customize the source of the video content. - The
useNativeControls,resizeMode, andusePosterprops customize the UI of the component. - The
onPlaybackStatusUpdate,onReadyForDisplay, andonIOSFullscreenUpdateprops pass information of the state of theVideocomponent. - The
onLoadStart,onLoad, andonErrorprops are also provided for backwards compatibility withImage(but they are redundant withonPlaybackStatusUpdate). 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 therefdescribed in the AV documentation.
numberThe desired audio panning value of the audio for this media. This value must be between -1.0 (full left) and 1.0 (full right).
See the AV documentation for more information.
booleanA boolean describing if the media should play once (false) or loop indefinitely (true).
See the AV documentation for more information.
booleanA boolean describing if the audio of this media should be muted. See the AV documentation for more information.
(error: string) => voidA 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.
(event: VideoFullscreenUpdateEvent) => voidA 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).
(status: AVPlaybackStatus) => voidA 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.
() => voidA function to be called when the video begins to be loaded into memory. Called without any arguments.
(status: AVPlaybackStatus) => voidA 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.
(event: VideoReadyForDisplayEvent) => voidA function to be called when the video is ready for display. Note that this function gets called whenever the video's natural size changes.
numberThe desired position of playback in milliseconds. See the AV documentation for more information.
React.ComponentType<{
source: ImageProps[source],
style: ImageProps[style]
}>A react-native Image like component to display the poster image.
ImageProps[source]The source of an optional image to display over the video while it is loading. The following forms are supported:
- A dictionary of the form
{ 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.
ImageProps[style]An optional property to pass custom styles to the poster image.
numberA number describing the new minimum interval in milliseconds between calls of onPlaybackStatusUpdate.
See the AV documentation for more information.
numberThe 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.
ResizeModeA string describing how the video should be scaled for display in the component view bounds.
Must be one of the ResizeMode enum values.
booleanA 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.
booleanA 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.
AVPlaybackSourceThe 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 the AV documentation for further information.
See: The Android developer documentation and the iOS developer documentation lists of the video formats supported on Android and iOS.
AVPlaybackStatusToSetA dictionary setting a new AVPlaybackStatusToSet on the video.
See the AV documentation for more information on AVPlaybackStatusToSet.
booleanA 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.
booleanA boolean which, if set to true, will display an image (whose source is set via the prop posterSource) while the video is loading.
StyleProp<ViewStyle>An optional property to pass custom styles to the internal video component.
numberThe 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.
Component Methods
This dismisses the fullscreen video view.
Promise<AVPlaybackStatus>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.
Promise<AVPlaybackStatus>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.
| Parameter | Type | Description |
|---|---|---|
| onPlaybackStatusUpdate | null | (status: AVPlaybackStatus) => void | A function taking a single parameter |
Sets a function to be called regularly with the AVPlaybackStatus of the playback object.
onPlaybackStatusUpdate will be called whenever a call to the API for this playback object completes
(such as setStatusAsync(), getStatusAsync(), or unloadAsync()), nd will also be called at regular intervals
while the media is in the loaded state.
Set progressUpdateIntervalMillis via setStatusAsync() or setProgressUpdateIntervalAsync() to modify
the interval with which onPlaybackStatusUpdate is called while loaded.
voidTypes
| Property | Type | Description |
|---|---|---|
| fullscreenUpdate | VideoFullscreenUpdate | The kind of the fullscreen update. |
| status(optional) | AVPlaybackStatus | The |
| Property | 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. |
| Property | Type | Description |
|---|---|---|
| naturalSize | VideoNaturalSize | An object containing the basic data about video size. |
| status(optional) | AVPlaybackStatus | The |
Enums
VideoFullscreenUpdate.PLAYER_WILL_PRESENT ＝ 0Describing that the fullscreen player is about to present.
VideoFullscreenUpdate.PLAYER_DID_PRESENT ＝ 1Describing that the fullscreen player just finished presenting.
VideoFullscreenUpdate.PLAYER_WILL_DISMISS ＝ 2Describing that the fullscreen player is about to dismiss.
统一 API
Video 组件 ref 上其余的 API 与 Audio.Sound 的 API 相同 - 有关更多信息，请参见 AV 文档。