0.1.7 • Published 3 years ago

react-video-thumbnail-image v0.1.7

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

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 NameTypeDefaultDescription
videoUrl (Required)stringThe url of the video you want to generate a thumbnail from
corsboolfalseWhether or not to set crossOrigin attribute to anonymous.
heightintResize thumbnail to specified height
renderThumbnailHtmlbooltrueWhether to render an image tag and show the thumbnail or return base 64 image only.
snapshotAtTimeint2The second at which the component should snap the image at.
thumbnailHandlerfuncCallback function that takes in thumbnail url as an argument
widthintResize thumbnail to specified width
altstringimage alt text

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

Examples

Contributors