Reference version

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

Expo 视频缩略图

一个允许你从视频文件生成图片作为缩略图的库。

Android
iOS
tvOS
Included in Expo Go
Recommended version:
~57.0.0

expo-video-thumbnails 允许你从视频文件生成一张图片作为缩略图。

安装

Terminal
npx expo install expo-video-thumbnails

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

视频缩略图
import { useState } from 'react'; import { StyleSheet, Button, View, Image, Text } from 'react-native'; import * as VideoThumbnails from 'expo-video-thumbnails'; export default function App() { const [image, setImage] = useState(null); const generateThumbnail = async () => { try { const { uri } = await VideoThumbnails.getThumbnailAsync( 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', { time: 15000, } ); setImage(uri); } catch (e) { console.warn(e); } }; return ( <View style={styles.container}> <Button onPress={generateThumbnail} title="生成缩略图" /> {image && <Image source={{ uri: image }} style={styles.image} />} <Text>{image}</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, image: { width: 200, height: 200, }, });

API

import * as VideoThumbnails from 'expo-video-thumbnails';

Methods

VideoThumbnails.getThumbnailAsync(sourceFilename, options)

ParameterTypeDescription
sourceFilenamestring

An URI of the video, local or remote.

options(optional)VideoThumbnailsOptions

A map defining how modified thumbnail should be created.

Default:{}

Create an image thumbnail from video provided via sourceFilename.

Returns a promise which fulfils with VideoThumbnailsResult.

Types

VideoThumbnailsOptions

PropertyTypeDescription
headers(optional)Record<string, string>

In case sourceFilename is a remote URI, headers object is passed in a network request.

quality(optional)number

A value in range 0.0 - 1.0 specifying quality level of the result image. 1 means no compression (highest quality) and 0 the highest compression (lowest quality).

time(optional)number

The time position where the image will be retrieved in ms.

VideoThumbnailsResult

PropertyTypeDescription
heightnumber

Height of the created image.

uristring

URI to the created image (usable as the source for an Image/Video element).

widthnumber

Width of the created image.