About five years ago I worked for a startup that was building a media platform. We had a customer facing website with content and a creator dashboard. The latter had, among other things, a feature that allowed users to pick a frame for a video and save it as a thumbnail image.
And that's exactly what I suggest to build today! This feature can be used as is or as a part of a more sophisticated one: taking screenshots of video chats or preparing thumbnails for a video player. Most importantly it'll introduce you to working with media events and canvas.
Video Thumbnail Picker: requirements and recipe
As a user I want to be able to choose a specific frame on a video and click a button, so that I could save an image of that frame.
Here's an example of how it can look like:
Aesthetics are entirely up to you: make it yours, but here are some requirements:
Requirements
- User should be able to download the selected frame image (via right click on it or using a separate button)
- If the video is loading and user clicks a button - thumbnail should be generated once the frame is visible.
- Thumbnail preview should have the same aspect ratio as the video.
- Thumbnail preview should look as intended on pixel dense displays (e.g. Retina)
Recipe
- Pick up a test video you'd like to use (a local one or find some mp4 test video url)
- Create a
<video controls src="{video_url}"/> - Create a
<canvas /> - Set canvas width and height to video client width and height.
- Add a
<button />that would draw image from video element onto canvas. - Ensure that button waits for the frame to be loaded.
- Spice it up with styles and framework of your choice.
- Enjoy!
Hints
The method to draw image from the video is called drawImage and accepts video element as the first argument.
You can double the size of canvas, but keep style width as intended to increase image resolution.
Hard mode: Video with Thumbnails
Default HTML video player doesn't support showing thumbnails when you're hovering over a certain position:
There are multiple ways how you could solve this and they usually revolve around generating thumbnails on every X frame/second and then rendering them.
In this I suggest generating those in the browser first and then showing them on a video. Keep in mind that those thumbnails need to me much smaller than the actual video - so that you could save up to eventual data storage and upload them quickly.
Hope you'll have fun!
Share your creations and feedback and see you tomorrow!
Liked the idea a lot and would love to have it all year long?
Top comments (1)
Very cool, Valeria! 🙌
It's fun to learn about all the thought that goes behind creating these thumbnail pickers.