simple-react-video-thumbnail-controls

This react component is designed to provide a quick, seamless way to display an html5 video component, and to select a point from the video to use as a thumbnail.

Please note that for full functionality, the video link provided must pass CORS requirements.

In browsers that do not support full functionality, or when thumbnail generation fails. there are two fallback behaviors:

1. a grey overlay with the play button displayed
2. directly showing the video element.

Props

Currently, the component uses only three properties, the video source URL(string), the time in seconds of the frame that you want to use as a thumbnail (number), and controls, which enable play/pause in case you want only thumbnail to show.

Usage

import VideoPlayer from 'simple-react-video-thumbnail'

// ...
render() {

  return (
    <div>
      <VideoPlayer videoUrl={'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4'} snapshotAt={10} />
    </div>
  )
}

Testing and Development

This component uses React Storybook, you may need to enable CORS in your browser in order to properly use current test cases.

This package was bootstrapped using https://github.com/damaera/publish-react-component

This package is a fork of https://github.com/FinnovateIo/simple-react-video-thumbnail

@FinnovateIO

Future development, milestones, and known issues

Update package as @FinnovateIO update this package, in that case create a issue and I will update it.