Tools VidGrid-HTML - Customizable video thumbnail grids in the browser

N

NessaCRT4

Lurker
Joined
Aug 13, 2023
Posts
461
Reaction score
0
Hello!
I'm tired of seeing so many posts with just a link to a video, no preview, no title... so I've decided to put some efforts (and churned some LLM tokens) into creating a new tool to make it easier to create beautiful image previews for everyone.
This tool is completely browser-based; you don't need to download or install any new software/app to use it. It can also be used on Mobile (Android/iOS) thanks to a responsive design.


VidGrid-HTML
Customizable video thumbnail grids in the browser
Try it here: https://vidgrid-html-87fe95.gitlab.io/
Main features
  • Generates JPG or Animated WebP contact sheets for videos directly in the browser
  • Works locally with no upload required
  • Samples frames at evenly spaced timestamps across the video or based on custom timestamps you can set yourself!
  • Configurable grid layout (columns/rows), spacing, output width, timecode overlay, colors, optional metadata header
  • Create your own presets with your preferred options (stored locally in your browser)
  • Batch processing, ZIP downloads, and upload/link-copy support (limited to Chevereto galleries with API upload enabled; unfortunately not JPGFish/JPG6 yet)
  • Basic VR Video cropping support (SBS and TB)
  • Privacy first: all processing happens on your device.
Examples of static/frozen output with various options:




Examples of animated output with various options:



Known Limitations
This tool uses native browser frame extraction, so as a rule of thumb, if the video is playable in your browser it should be compatible (tip: some browsers like Chrome support more video codecs and thus support more files). I have implemented a fallback using FFmpeg WASM but it is much slower and subject to memory limits. At worse it should generate blank/failed frames or skip the file if it's really not usable. Do not be surprised if old format, old video/audio codecs cannot be processed correctly... browsers can do a lot more things these days, but not everything!
Thanks for checking it out!
And thanks to Utopic for giving me a reason to get back on that project I had abandoned and testing it first.
Oh, and I've made VidGrid-HTML open-source (MIT License), if anyone is interested in the source code: https://gitlab.com/aknott001/vidgrid-html
Any bug report, suggestion, feedback is welcome in this thread.
 
Fantastic tool, glad it’s being developed. Hopefully people will find it useful.
 
Finally, been searching for days and its just old youtube videos and unclear directions about "Contact sheets"
thanks for your help!
 
Major update, v.2.0.0 has been released and is live at the same URL above.
Animated thumbnails are here! and few fixes.
New "Animated output (WebP)"options (they can be saved as presets too):

Example output:


 
You are truly goated, It sucks you made this just as I did a post :KEKWlaugh:
 
Thanks, there's always a next post... hopefully :KEKW:
One tip I forgot regarding the animated thumbnail's output file size, depending on the width, FPS, quality, WebP compression, you can quickly reach the JPG6 15MB limit. The default options are pretty generous in terms of quality, it's possible to drop to 75-80 quality and maybe narrower width, to almost always be under the limit.
 
Sick work! I know you started out with just accompishing something basic but its turned out to become a big project worth using. Great work!
Any future features planned?
Recommend adding a VR toggle too, if its possible!
 
What would that entail? I don't really deal with VR format, if you have example videos and what you'd expect it to do I might look into it.
 
VR videos are mostly now Side by Side, so two images, split on the screen for the two eyes.
Using a thumbnail maker (using yours in this case) captures a frame (side by side) as it is knows its a video. Although it does muddy the content if you want to provide full content screencaps.
Using SCS https://vongoob9.gitlab.io/subtitles_contact_sheet_qt/
It has a VR toggle, so it scraps one of the eye, and keeps the other one, result is more content grids on screen as well as a smaller resolution file
So you can also end up with a banger like this one to put as a small preview on torrents/bbs etc
 
nattieivanova
I see, thanks for the explanations, I think I can manage to do something for SBS formats, without any fisheye correction though... should even work for animated grids.
I've just experienced a bit with the FFMPEG WASM filters to correct the fisheye effect and other formats, there are so many options there: https://ffmpeg.org/ffmpeg-filters.html#v360
But the unfortunate reality of browser-based processing is that we're limited in both memory and CPU threads. Without going too much into details internally it has to first load the file in the browser memory, and anything over few hundred MB it struggles (not even thinking about doing this on mobile)... and VR files are genrally at least few GB large... but I guess a simplistic "VR mode" with ability to choose left/right eye would already be a nice addition, so I'll work on this soon. Thanks for the suggestion!
 
What a tool, super convient and android use! Thank you aknott! Utterly amazing and impressive. Does simpcity have a limit for sizes with the webp? Like gifs maybe? I think can only post as direct view, or bbccode full, linked, the webp? I try to keep my gif under 3mb.
 
You have to upload whatever .jpg / .gif / .webp file you generate from the tool to jpg6 and then import into your post as a normal image.
Better not make heavy sized gifs for a better forum performance though. Also, jpg6 has a file size limit anyway so if the gif is too heavy it won't let you upload it.
 
No problem, glad it can be useful! :pepoLove:
I hope someday it can get more integrated with the forum, I've asked JPGFish staff if they could allow API uploads for this, then users could easily host the thumbnails and just copy the codes in their message... could even be a button/popup like the "Upload images", but for now I didn't get an answer (I figure it might be hard, lots of bots might want to abuse API uploads then):
The size limit of JPGFish is 15MB, I use "BBCode Medium" even if the thumbnail is not animated on SimpCity... I figure anyone willing to check a previews are going to be OK with one click and they get the surprise of it being animated at that point :KEKW:
The small animated thumbnail (if you use "BBCode Full") isn't big enough to view much anyways... so besides being more clickbaity, I don't think it outweight the disadvantage of loading up to 15MB per thumbnail for each user viewing the thread (10 of these and you've made people download 150MB 😓).
Lastly I think staff/moderators prefer "BBCode Medium" because it gets users on JPGFish and allows them to display ads which helps funding the servers.
 
nattieivanova
I've added the "VR Video" dropdown with options to crop the most common formats. As expected FFMPEG WASM processing is a no-go, resources in the browser are too limited.

I've also re-order/redesigned the input fields a bit, added collapsible fieldsets, should help a bit with the scrolling on mobile. And improved performances a bit I think, I had some useless redrawing of the header which wasn't causing any visible issue, so it went undetected.
Anyway, here's v.2.1.0, same URL.
 
Ever found yourself generating thumbnails and the automatic timestamps chosen by the tool completely miss the good parts you wanted to show?
Well, no more! VidGrid-HTML v.2.2.0 introduces a way to overrides the "auto" timestamps for each output item, with a "Timestamp editor" letting you define every single cell of your thumbnail as you wish. It will auto merge with automatic timestamps if you don't specify enough timestamp markers, and ignore the last ones if you define too many.

The video preview in the editor is limited to videos you can open and watch in your browser, for videos that are not supporter the editor still works, just without any preview.
Neat use case: if you make a 1x1 cell thumbnail, before this feature, the timestamp was automatically in the middle of the video, now you can pick exactly where you want it... for animated and static thumbnails!
 
I've just released a new version:
VidGird-HTML v.2.3.0
  • Task management instead of file batches: add files, remove, requeue, requeue all.
  • Improved Timestamp editor for mobile and shortcuts.
  • Improved Timestamp resolution when not enough custom markers have been set, the grid size can now be changed without resetting custom timestamps.
  • Option sections collapsed/expanded status are saved per preset.
 
Major Version Update, same URL:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.0.0
  • NEW - Grid Template Editor: You can now create custom templates of uneven grid, beyond columns*row.
    • This works with static and animated grids and it also works in conjunction with the Timestamp editor, pick the perfect image for your full-size cells!




    • Here are some example:




  • NEW - Settings: 4 Themes to change the appearance of the app. Changed the "Show previews" to a global parameter. Moved "Upload Destinations" to this modal.








  • NEW- Compact bar, on Mobile and on Desktop, when you add a lot of files it can get tedious to scroll to start/see the progress of the processing. To help with this a new bar will appear automatically at the top when the Processing panel at the top isn't visible. You can expand it for the full experience (even to add more files, even while processing), or use it collapsed as a shortcut... no more scrolling back to the top.




  • NEW- Style customizations
    • Font family and font sizes for timecode and the header:




    • Improved Color Picker for the background/text color




  • NEW - 12 Default presets with various settings, grid template/sizes. You can edit/delete them at will... if you had existing setting you will need to delete/clear the localStorage for the app/site in your browser (Google it).


  • FIXES - Overall better performances, slightly improved FFMPEG instance handling, better mobile support especially in the Timestamp editor.
As before, if you find bugs or if you have suggestions, feels free to ask here!
 
Minor Version Update, same URL:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.1.1
  • NEW - Animated Sequencemode
    • Replaces the grid and shows short segments one after the other (sequentially), respecting the output width you've chosen (scales the video), allows "Show Header metadata" and "Timecode" overlays because each frame is composed.


    • MP4 format encoding support for ALL animated sequences
    • Here are some example:

      WEBP "Static (hold frame)"

      WEBP "Video (play segment)"





      MP4 "Video (play segment)"

  • NEW- Animated Sequence "Video with audio"
    • In the same group of options if you select the "Video with audio" under "Render mode", FFMPEG will be used to cut segments of the video directly with audio and reencode them with browser friendly codecs. The output width is respected but there is no overlay (metadata/timecode). This mode only allows MP4 output (because it's the only format that allows audio).

      MP4 "Video with audio"

  • NEW- Upload destination settings "Allowed extensions" and "Max File Size" that are considered before attempting to upload a generated output.


  • NEW - Audio bitrate and track count added to the Header metadata
  • NEW - 4 default presets for Sequence mode added.
  • FIIXES - Solved minor memory leak for FFMPEG fallback and keyboard shortcuts in Timestamp Editor.
As before, if you find bugs or if you have suggestions for new features, feel free to ask here!
 
You must log in or register to reply here.
Back
Top