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 |
---|---|---|---|---|
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';
uri
.0.0
- 1.0
specifying quality level of the result image. 1
means no compression (highest quality) and 0
the highest compression (lowest quality).uri
is a remote uri
, headers object passed in a network request.{ uri, width, height }
where uri
is a URI to the created image (useable as the source for an Image
/Video
element), width, height
specify the dimensions of the image.