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.
Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
-
npx expo install expo-video-thumbnails
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import React, { 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(
'http://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>
);
}
%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%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';
VideoThumbnails.getThumbnailAsync(sourceFilename, options)
Name | 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
.
Returns
Returns a promise which fulfils with VideoThumbnailsResult
.
VideoThumbnailsOptions
Name | 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. |
VideoThumbnailsResult
Name | Type | Description |
---|---|---|
height | number | Height of the created image. |
uri | string | URI to the created image (usable as the source for an Image/Video element). |
width | number | Width of the created image. |