Source: https://docs.expo.dev/versions/v53.0.0/sdk/video-thumbnails

Hide navigation

Ctrl K

Home Guides EAS Reference Learn

Reference version

SDK 53

Archive Expo Snack Discord and Forums Newsletter

Expo VideoThumbnails

GitHub Changelog npm

A library that allows you to generate an image to serve as a thumbnail from a video file.

GitHub Changelog npm

Android

iOS

Bundled version:

~9.1.3

Copy page

expo-video-thumbnails allows you to generate an image to serve as a thumbnail from a video file.

Installation

Terminal

Copy

- 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.

Usage

Video Thumbnails

Copy

Open in Snack

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, }, });

API

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

Methods

`VideoThumbnails.getThumbnailAsync(sourceFilename, options)`

| Parameter | Type | Description | | --- | --- | --- | | sourceFilename | string | An URI of the video, local or remote. | | options(optional) | [VideoThumbnailsOptions](https://docs.expo.dev/versions/v53.0.0/sdk/video-thumbnails#videothumbnailsoptions) | A map defining how modified thumbnail should be created.<br><br>Default:{} |

Create an image thumbnail from video provided via sourceFilename.

Returns:

[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) <[VideoThumbnailsResult](https://docs.expo.dev/versions/v53.0.0/sdk/video-thumbnails#videothumbnailsresult) >

Returns a promise which fulfils with VideoThumbnailsResult .

Types

`VideoThumbnailsOptions`

| Property | Type | Description | | --- | --- | --- | | 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`

| Property | 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. |