React Native generate thumbnail for video url

Question

I have videos that I'd like to present as thumbnails before a user clicks on them for the full video. They are not local, I only have the url. Is there a RN component to do this? The RN Image component does not take videos urls as sources.

Solution 1

Not possible. Video thumbnail cannot be auto-generated from video URL. It should be created and stored along with the video in backend database and when RN app receives video URL, it should receive thumbnail URL too. Then you can use Image and TouchableOpacity components to add pressing behavior on the thumbnail.

However, if you use Youtube videos only, then react-native-thumbnail-video might be a quick solution to your problem.

Solution 2

It's possible using Expo Video Thumbnail library

just like this example

import React from 'react';
import { StyleSheet, Button, View, Image, Text } from 'react-native';
import * as VideoThumbnails from 'expo-video-thumbnails';

export default class App extends React.Component {
  state = {
    image: null,
  };

  generateThumbnail = async () => {
    try {
      const { uri } = await VideoThumbnails.getThumbnailAsync(
        'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        {
          time: 15000,
        }
      );
      this.setState({ image: uri });
    } catch (e) {
      console.warn(e);
    }
  };

  render() {
    const { image } = this.state;
    return (
      <View style={styles.container}>
        <Button onPress={this.generateThumbnail} title="Generate thumbnail" />
        {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
        <Text>{image}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

-UPDATE-

another way to do this is using video library without playing the video and the controllers

example:

npm install --save react-native-video



import Video from 'react-native-video';

// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.

<Video source={{uri: "background"}}   // Can be a URL or a local file.
       paused={true}
controls={false}
/>

in this example, it will display the video without playing it, so basically will give you the thumbnail.

P.S: Not recommended if you have multiple videos in the same view more than 10.

Solution 3

Unfortunately there is no react-native component/api that does this. However, you can leverage native OS apis (AVAssetImageGenerator on ios and MediaMetadataRetriever on android) to generate thumbnails from video url in your react-native app.

For a quick solution, you can use react-native-create-thumbnail. It's a wrapper around the above mentioned system apis and supports both remote and local videos.

Comments

[Keng]

Did you ever figure this out? I can't figure out a way to get the actual video file.

[omriki]

I haven't come across anything yet @Keng

[Manju JK]

But it's not working for local video files. Do you have any idea? @Balalen

[Balalen]

another way to do it is, load the vide player without playing it, this way it will display the Thumbnail without playing the video, i edited the answer, take a look

[Manju JK]

Other day I forgot to respond here. Actually expo-video-thumbnails works for local video file as well. I had some coding issue in my local, that's it didn't work. But when I cross checked, it was working fine. thanks for the reply @Balalen

[GeekDev]

@Balalen expo-video-thumbnails works fine for me, thanks!

[Bhadresh]

I am getting error in IOS [Error: Can't write to file.]

[Balalen]

@Bhadresh which solution you are using ? the expo one or the video one ?

[Bhadresh]

@Balalen see my question here stackoverflow.com/questions/69525358/…