This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 52).
A library that allows you to generate an image to serve as a thumbnail from a video file.
expo-video-thumbnails allows you to generate an image to serve as a thumbnail from a video file.
-Â npx expo install expo-video-thumbnailsIf you are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions as mentioned by the library's README under "Installation in bare React Native projects" section.
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://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
{
time: 15000,
}
);
setImage(uri);
} catch (e) {
console.warn(e);
}
};
return (
<View style={styles.container}>
<Button onPress={generateThumbnail} title="Generate thumbnail" />
{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,
},
});
import * as VideoThumbnails from 'expo-video-thumbnails';
| Parameter | Type | Description |
|---|---|---|
| sourceFilename | string | 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.
Promise<VideoThumbnailsResult>Returns a promise which fulfils with VideoThumbnailsResult.
| Property | Type | Description |
|---|---|---|
| headers(optional) | Record<string, string> | In case |
| quality(optional) | number | A value in range |
| time(optional) | number | The time position where the image will be retrieved in ms. |