CODEWITHSUNDEEP
reactjsreact-nativethumbnailspreviewvideo-thumbnails
Alexandra Didenco
Alexandra Didenco

Reputation: 9

Show preview_video image/thumbnail as preview before playing video in React

I have video that I'd like to present as preview_video image/thumbnail before a user clicks on them for the full video. Is there a RN component to do this?

I have this code:

import { Video } from 'expo-av';
import VideoPlayer from 'expo-video-player';
import * as React from "react";
import {View} from "react-native";
import Header from "../../components/header/Header";

export default function VideoPlayerComponent(props) {
const { url } = props.route.params;

return (
    <View>
        <Header
            title="Video"
            goBack
        />
        <VideoPlayer
            style={{height:550}}
            videoProps={{
                shouldPlay: true,
                resizeMode: Video.RESIZE_MODE_CONTAIN,
                source: {
                    uri: url,
                },
            }}
        />
    </View>

);
}

Upvotes: 0

Views: 5824

Answers (1)

Artem Avanesyan
Artem Avanesyan

Reputation: 56

Seems you can try this component: https://docs.expo.dev/versions/latest/sdk/video-thumbnails/

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

Then just include a condition when the video component is in its paused state, the thumbnail should be displayed with a higher zIndex. Like describe here: react native video display thumbnail before video is played

Upvotes: 0

Related Questions