🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

react-video-thumbnail-image

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-video-thumbnail-image

Create a thumbnail image of video by providing any url.

0.1.7
latest
npm
Version published
Weekly downloads
173
30.08%
Maintainers
1
Weekly downloads
 
Created
Source

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

  • Saeed Ullah Khan @saad3074

Keywords

react

FAQs

Package last updated on 28 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts