首页指南参考教程

Expo 视频

提供 API 以实现应用中的视频播放的库。

Android
iOS
Web
expo-video 是一个新的实验性库，旨在用更现代、更可靠的实现替换 expo-av 中的 Video 组件。如果你正在寻找更稳定的 API，请使用 expo-av，直到该库稳定下来。
为了提供更快的更新，Expo Go 和 Snack 目前不支持 expo-video。要使用它，请创建一个 开发构建。

expo-video 是一个跨平台、高性能的视频组件，用于 React Native 和 Expo，并支持 Web。

¥expo-video is a cross-platform, performant video component for React Native and Expo with Web support.

安装

¥Installation

Terminal
- npx expo install expo-video

If you are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

用法

¥Usage

这是一个带有播放和暂停按钮的视频的简单示例。

¥Here's a simple example of a video with a play and pause button.

Video
import { useVideoPlayer, VideoView } from 'expo-video';
import { useEffect, useRef, useState } from 'react';
import { PixelRatio, StyleSheet, View, Button } from 'react-native';

const videoSource =
  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';

export default function VideoScreen() {
  const ref = useRef(null);
  const [isPlaying, setIsPlaying] = useState(true);
  const player = useVideoPlayer(videoSource, player => {
    player.loop = true;
    player.play();
  });

  useEffect(() => {
    const subscription = player.addListener('playingChange', isPlaying => {
      setIsPlaying(isPlaying);
    });

    return () => {
      subscription.remove();
    };
  }, [player]);

  return (
    <View style={styles.contentContainer}>
      <VideoView
        ref={ref}
        style={styles.video}
        player={player}
        allowsFullscreen
        allowsPictureInPicture
      />
      <View style={styles.controlsContainer}>
        <Button
          title={isPlaying ? 'Pause' : 'Play'}
          onPress={() => {
            if (isPlaying) {
              player.pause();
            } else {
              player.play();
            }
            setIsPlaying(!isPlaying);
          }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  contentContainer: {
    flex: 1,
    padding: 10,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 50,
  },
  video: {
    width: 350,
    height: 275,
  },
  controlsContainer: {
    padding: 10,
  },
});

API

import { VideoView, useVideoPlayer } from 'expo-video';

Component

VideoView

Type: React.PureComponent<VideoViewProps>

VideoViewProps

allowsFullscreen

Optional • Type: boolean • Default: true

Determines whether fullscreen mode is allowed or not.

Only for: 
iOS 14+

allowsPictureInPicture

Optional • Type: boolean • Default: false

Determines whether the player allows Picture in Picture (PiP) mode.

contentFit

Optional • Type: VideoContentFit • Default: 'contain'

Describes how the video should be scaled to fit in the container. Options are 'contain', 'cover', and 'fill'.

Only for: 
iOS

contentPosition

Optional • Type: { dx: number, dy: number }

Determines the position offset of the video inside the container.

nativeControls

Optional • Type: boolean • Default: true

Determines whether native controls should be displayed or not.

Only for: 
Android
iOS 14+

onPictureInPictureStart

Optional • Type: () => void

A callback to call after the video player enters Picture in Picture (PiP) mode.

Only for: 
Android
iOS 14+

onPictureInPictureStop

Optional • Type: () => void

A callback to call after the video player exits Picture in Picture (PiP) mode.

player

Type: VideoPlayer

A player instance – use useVideoPlayer() to create one.

Only for: 
Android
iOS

requiresLinearPlayback

Optional • Type: boolean • Default: false

Determines whether the player allows the user to skip media content.

Only for: 
iOS

showsTimecodes

Optional • Type: boolean • Default: true

Determines whether the timecodes should be displayed or not.

Only for: 
Android 12+
iOS 14.2+

startsPictureInPictureAutomatically

Optional • Type: boolean • Default: false

Determines whether the player should start Picture in Picture (PiP) automatically when the app is in the background.

Note: Only one player can be in Picture in Picture (PiP) mode at a time.

Inherited Props

  • ViewProps

Component Methods

enterFullscreen()

Enters fullscreen mode.

Returns:

void

exitFullscreen()

Exits fullscreen mode.

Returns:

void

Only for: 
Android
iOS 14+

startPictureInPicture()

Enters Picture in Picture (PiP) mode. Throws an exception if the device does not support PiP.

Note: Only one player can be in Picture in Picture (PiP) mode at a time.

Returns:

void

Only for: 
Android
iOS 14+

stopPictureInPicture()

Exits Picture in Picture (PiP) mode.

Returns:

void

Hooks

useVideoPlayer(source, setup)

NameTypeDescription
sourceVideoSource

A video source that is used to initialize the player.

setup
(optional)		(player: VideoPlayer) => void

A function that allows setting up the player. It will run after the player is created.


Creates a VideoPlayer, which will be automatically cleaned up when the component is unmounted.

Returns:

VideoPlayer

Classes

VideoPlayer

Type: Class extends _default<VideoPlayerEvents>

A class that represents an instance of the video player.

VideoPlayer Properties

currentTime

Type: number

Float value indicating the current playback time in seconds.

If the player is not yet playing, this value indicates the time position at which playback will begin once the play() method is called.

Setting currentTime to a new value seeks the player to the given time.

duration

Type: number

Float value indicating the duration of the current video in seconds.

This property is get-only

isLive

Type: boolean

Boolean value indicating whether the player is currently playing a live stream.

This property is get-only

loop

Type: boolean

Determines whether the player should automatically replay after reaching the end of the video.

muted

Type: boolean

Boolean value whether the player is currently muted. Setting this property to true/false will mute/unmute the player.

playbackRate

Type: number

Float value between 0 and 16 indicating the current playback speed of the player.

playing

Type: boolean

Boolean value whether the player is currently playing.

This property is get-only, use play and pause methods to control the playback.

Only for: 
Android
iOS

preservesPitch

Type: boolean

Boolean value indicating if the player should correct audio pitch when the playback speed changes.

On web, changing this property is not supported, the player will always correct the pitch.

showNowPlayingNotification

Type: boolean

Boolean value determining whether the player should show the now playing notification.

status

Type: VideoPlayerStatus

Indicates the current status of the player.

This property is get-only

Only for: 
iOS
Android

staysActiveInBackground

Type: boolean

Determines whether the player should continue playing after the app enters the background.

volume

Type: number

Float value between 0 and 1 representing the current volume. Muting the player doesn't affect the volume. In other words, when the player is muted, the volume is the same as when unmuted. Similarly, setting the volume doesn't unmute the player.

VideoPlayer Methods

pause()

Pauses the player.

Returns:

void

play()

Resumes the player.

Returns:

void

replace(source)

NameType
sourceVideoSource

Replaces the current source with a new one.

Returns:

void

replay()

Seeks the playback to the beginning.

Returns:

void

seekBy(seconds)

NameType
secondsnumber

Seeks the playback by the given number of seconds.

Returns:

void

Methods

Only for: 
Android
iOS

Video.isPictureInPictureSupported()

Returns whether the current device supports Picture in Picture (PiP) mode.

Returns:

boolean

A boolean which is true if the device supports PiP mode, and false otherwise.

Types

DRMOptions

Specifies DRM options which will be used by the player while loading the video.

NameTypeDescription
base64CertificateData
(optional)		string
Only for: 
iOS

Specifies the base64 encoded certificate data for the FairPlay DRM. When this property is set, the certificateUrl property is ignored.

certificateUrl
(optional)		string
Only for: 
iOS

Specifies the certificate URL for the FairPlay DRM.

contentId
(optional)		string
Only for: 
iOS

Specifies the content ID of the stream.

headers
(optional)		undefined

Determines headers sent to the license server on license requests.

licenseServerstring

Determines the license server URL.

multiKey
(optional)		boolean
Only for: 
Android

Specifies whether the DRM is a multi-key DRM.

typeDRMType

Determines which type of DRM to use.

DRMType

Literal Type: string

Specifies which type of DRM to use. Android supports Widevine, PlayReady and ClearKey, iOS supports FairPlay.

Acceptable values are: 'clearkey' | 'fairplay' | 'playready' | 'widevine'

PlayerError

Contains information about any errors that the player encountered during the playback

NameTypeDescription
messagestring-

VideoContentFit

Literal Type: string

Describes how a video should be scaled to fit in a container.

  • contain: The video maintains its aspect ratio and fits inside the container, with possible letterboxing/pillarboxing.
  • cover: The video maintains its aspect ratio and covers the entire container, potentially cropping some portions.
  • fill: The video stretches/squeezes to completely fill the container, potentially causing distortion.

Acceptable values are: 'contain' | 'cover' | 'fill'

VideoMetadata

Contains information that will be displayed in the now playing notification when the video is playing.

NameTypeDescription
artist
(optional)		string

Secondary text that will be displayed under the title.

title
(optional)		string

The title of the video.

VideoPlayerEvents

Handlers for events which can be emitted by the player.

NameTypeDescription
playToEnd() => void

Handler for an event emitted when the player plays to the end of the current source.

playbackRateChange(newPlaybackRate: number, oldPlaybackRate: number) => void

Handler for an event emitted when the playbackRate property of the player changes.

playingChange(newIsPlaying: boolean, oldIsPlaying: boolean) => void

Handler for an event emitted when the player starts or stops playback.

sourceChange(newSource: VideoSource, previousSource: VideoSource) => void

Handler for an event emitted when the current media source of the player changes.

statusChange(newStatus: VideoPlayerStatus, oldStatus: VideoPlayerStatus, error: PlayerError) => void

Handler for an event emitted when the status of the player changes.

volumeChange(newVolume: VolumeEvent, oldVolume: VolumeEvent) => void

Handler for an event emitted when the volume property of the player changes.

VideoPlayerStatus

Literal Type: string

Describes the current status of the player.

  • idle: The player is not playing or loading any videos.
  • loading: The player is loading video data from the provided source
  • readyToPlay: The player has loaded enough data to start playing or to continue playback.
  • error: The player has encountered an error while loading or playing the video.

Acceptable values are: 'idle' | 'loading' | 'readyToPlay' | 'error'

VideoSource

Type: string or object shaped as below:


NameTypeDescription
drm
(optional)		DRMOptions

Specifies the DRM options which will be used by the player while loading the video.

headers
(optional)		Record<string, string>
Only for: 
Android
iOS

Specifies headers sent with the video request.

For DRM license headers use the headers field of DRMOptions.

metadata
(optional)		VideoMetadata

Specifies information which will be displayed in the now playing notification. When undefined the player will display information contained in the video metadata.

uristring

The URI of the video.

VolumeEvent

Contains information about the current volume and whether the player is muted.

NameTypeDescription
isMutedboolean-
volumenumber-
Expo 中文网 - 粤ICP备13048890号