How to preview first frame of Video Uploaded to S3 in Video Element

Viewed 40

I uploaded a video to S3 via NodeJS using the following S3 Params:

    let S3Params = {
        Bucket: process.env.S3_BUCKET_NAME,
        Key: fileName,
        ACL: 'public-read',
        ContentType: fileType,
        Body: fileContent
    };
    s3.upload(S3Params, (err, data) => {
            if (err) {
                cb(null, err);
            } else {
                cb(data.Location, null);
            }
        });

Where fileType = "video/mp4";

And then I successfully got the URL to the uploaded video.

When I tried previewing the URL on HTML Video element like this

<video>
   <source src={videoLocation}/>
</video>

the video preview is not showing at all.

I was expecting that when the url is loaded, at least the first frame of the video should show before I click on the play button.

How can I make the first frame of the video to show in the video preview before I click on the play button?

Because right now everywhere is just plain dark.

Though when I click on the play button the video is playing very well. I just want the first frame of the video to preview before play so everywhere is not blank.

Thank you

0 Answers
Related