React Video Thumbnail Image

Given a video url, attempt to generate a video thumbnail image using HTML Canvas Element

Note*: The <Canvas> element will only be able to generate a thumbnail image, if CORS allows it.

If not, you may see a similar console error as below:

DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Canvas may not be exported.

Please read about Cross-Origin Resource Sharing (CORS), if you would like more details on how it works.

Installation

git clone https://github.com/saad3074/react-video-thumbnail-image.git

OR

npm install --save-dev react-video-thumbnail-image

Usage

import VideoImageThumbnail from 'react-video-thumbnail-image'; // use npm published version
...
<VideoImageThumbnail
    videoUrl="https://dl.dropboxusercontent.com/s/pkz1yguv8vcs7k1/cover.mp4?dl=0"
    thumbnailHandler={(thumbnail) => console.log(thumbnail)}
    width={120}
    height={80}
    alt="my test video"
    />

Properties

Prop Name	Type	Default	Description
videoUrl (Required)	string		The url of the video you want to generate a thumbnail from
cors	bool	false	Whether or not to set crossOrigin attribute to anonymous.
height	int		Resize thumbnail to specified height
renderThumbnailHtml	bool	true	Whether to render an image tag and show the thumbnail or return base 64 image only.
snapshotAtTime	int	2	The second at which the component should snap the image at.
thumbnailHandler	func		Callback function that takes in thumbnail url as an argument
width	int		Resize thumbnail to specified width
alt	string		image alt text

*Note: The longer the snapshotAtTime, the more video data it may have to download.

Examples

Contributors

• Saeed Ullah Khan @saad3074