Tools VidGrid-HTML - Anpassbare Video-Thumbnail-Grids im Browser

N

NessaCRT4

Lurker
Registriert
13. Aug 2023
Beiträge
471
Reaktionswert
0
Hallo!
Ich hab es satt, so viele Posts zu sehen, die nur einen Link zu einem Video enthalten, ohne Vorschau, ohne Titel... also hab ich beschlossen, etwas Mühe (und ein paar LLM-Tokens) in ein neues Tool zu stecken, mit dem jeder ganz einfach schöne Bildvorschauen erstellen kann.
Das Tool läuft komplett im Browser; du musst keine neue Software/App herunterladen oder installieren. Dank Responsive Design geht es auch mobil (Android/iOS).


VidGrid-HTML
Anpassbare Video-Thumbnail-Raster im Browser
Probier es hier aus: https://vidgrid-html-87fe95.gitlab.io/
Hauptfunktionen
  • Erstellt JPG- oder animierte WebP-Contact-Sheets für Videos direkt im Browser
  • Läuft lokal, kein Upload nötig
  • Nimmt Frames in gleichmäßigen Zeitabständen über das ganze Video oder an eigenen Zeitstempeln, die du selbst festlegen kannst!
  • Konfigurierbares Raster (Spalten/Zeilen), Abstand, Ausgabebreite, Timecode-Overlay, Farben, optionaler Metadaten-Header
  • Eigene Presets mit deinen bevorzugten Optionen anlegen (werden lokal in deinem Browser gespeichert)
  • Stapelverarbeitung, ZIP-Downloads und Upload-/Link-Kopier-Unterstützung (beschränkt auf Chevereto-Galerien mit aktiviertem API-Upload; leider noch nicht JPGFish/JPG6)
  • Einfacher Zuschnitt für VR-Videos (SBS und TB)
  • Privatsphäre zuerst: Die gesamte Verarbeitung passiert auf deinem Gerät.
Beispiele für statische Ausgabe mit verschiedenen Optionen:




Beispiele für animierte Ausgabe mit verschiedenen Optionen:



Bekannte Einschränkungen
Das Tool nutzt die native Frame-Extraktion des Browsers, daher gilt als Faustregel: Wenn das Video in deinem Browser abspielbar ist, sollte es kompatibel sein (Tipp: Manche Browser wie Chrome unterstützen mehr Video-Codecs und damit mehr Dateien). Ich hab einen Fallback mit FFmpeg WASM eingebaut, der aber viel langsamer ist und Speichergrenzen unterliegt. Im schlimmsten Fall gibt es leere/fehlgeschlagene Frames oder die Datei wird übersprungen, wenn sie wirklich nicht nutzbar ist. Wundert euch nicht, wenn alte Formate und alte Video-/Audio-Codecs nicht richtig verarbeitet werden... Browser können heutzutage viel mehr, aber nicht alles!
Danke fürs Ausprobieren!
Und danke an Utopic, dass du mir einen Grund gegeben hast, dieses aufgegebene Projekt wieder anzupacken, und fürs erste Testen.
Ach ja, VidGrid-HTML ist jetzt Open Source (MIT-Lizenz), falls sich jemand für den Quellcode interessiert: https://gitlab.com/aknott001/vidgrid-html
Bugreports, Vorschläge und Feedback sind in diesem Thread jederzeit willkommen.
 
Fantastisches Tool, schön, dass es weiterentwickelt wird. Hoffentlich finden es die Leute nützlich.
 
Endlich, ich suche seit Tagen und finde nur alte YouTube-Videos und unklare Anleitungen zu "Contact Sheets"
Danke für deine Hilfe!
 
Großes Update, v.2.0.0 ist raus und unter der gleichen URL wie oben live.
Animierte Thumbnails sind da! und ein paar Fixes.
Neue Optionen für "Animierte Ausgabe (WebP)" (können auch als Presets gespeichert werden):

Beispielausgabe:


 
Du bist echt der GOAT, ist scheiße, dass du das genau dann gebracht hast, als ich einen Post gemacht hab :KEKWlaugh:
 
Danke, es gibt immer einen nächsten Post... hoffentlich :KEKW:
Ein Tipp, den ich vergessen hab, zur Dateigröße der animierten Thumbnails: Je nach Breite, FPS, Qualität und WebP-Kompression erreichst du schnell das 15MB-Limit von JPG6. Die Standardeinstellungen sind bei der Qualität ziemlich großzügig, man kann auf Qualität 75-80 runtergehen und vielleicht eine schmalere Breite wählen, um fast immer unter dem Limit zu bleiben.
 
Geile Arbeit! Ich weiß, du hast ursprünglich nur was Einfaches vorgehabt, aber es ist zu einem richtig großen Projekt geworden, das sich zu nutzen lohnt. Top Arbeit!
Sind zukünftige Features geplant?
Ich würde auch einen VR-Schalter empfehlen, falls möglich!
 
Was würde das beinhalten? Ich beschäftige mich eigentlich nicht mit dem VR-Format. Wenn du Beispielvideos hast und sagst, was du davon erwartest, schau ich es mir vielleicht mal an.
 
VR-Videos sind inzwischen meistens Side by Side, also zwei Bilder, die auf dem Bildschirm für die zwei Augen geteilt sind.
Mit einem Thumbnail-Maker (in dem Fall deinem) wird ein Frame (side by side) so aufgenommen, wie er ist, weil er weiß, dass es ein Video ist. Es macht den Inhalt allerdings unübersichtlich, wenn man vollständige Screencaps liefern will.
Mit SCS https://vongoob9.gitlab.io/subtitles_contact_sheet_qt/
Es hat einen VR-Schalter, also wird ein Auge verworfen und das andere behalten. Ergebnis: mehr Content-Grids auf dem Bildschirm und eine Datei mit kleinerer Auflösung
So kannst du am Ende auch so einen Knaller wie diesen als kleine Vorschau für Torrents/BBS usw. verwenden
 
nattieivanova
Verstehe, danke für die Erklärungen. Ich glaube, ich kriege was für SBS-Formate hin, allerdings ohne Fisheye-Korrektur... sollte sogar für animierte Grids funktionieren.
Ich hab gerade ein bisschen mit den FFMPEG-WASM-Filtern experimentiert, um den Fisheye-Effekt und andere Formate zu korrigieren, da gibt's echt viele Optionen: https://ffmpeg.org/ffmpeg-filters.html#v360
Aber die unglückliche Realität bei browserbasierter Verarbeitung ist, dass wir bei Speicher und CPU-Threads begrenzt sind. Ohne zu sehr ins Detail zu gehen: Die Datei muss zuerst in den Browser-Speicher geladen werden, und alles über ein paar hundert MB bringt es ins Schwitzen (am Handy will ich gar nicht erst dran denken)... und VR-Dateien sind generell mindestens ein paar GB groß... aber ich denke, ein simpler "VR-Modus" mit Auswahl von linkem/rechtem Auge wäre schon eine nette Ergänzung, also arbeite ich bald daran. Danke für den Vorschlag!
 
Was für ein Tool, super praktisch und auf Android nutzbar! Danke aknott! Absolut geil und beeindruckend. Hat SimpCity eine Größenbeschränkung für webp? Wie bei Gifs vielleicht? Ich glaube, man kann das webp nur als Direktansicht oder mit BBCode full, verlinkt, posten? Ich versuche, meine Gifs unter 3 MB zu halten.
 
Du musst die .jpg / .gif / .webp-Datei, die das Tool erzeugt, bei jpg6 hochladen und dann als normales Bild in deinen Post einfügen.
Mach besser keine schweren Gifs, dann läuft das Forum besser. Außerdem hat jpg6 sowieso ein Dateigrößenlimit, wenn das Gif also zu groß ist, lässt es dich nicht hochladen.
 
Kein Problem, freut mich, dass es nützlich ist! :pepoLove:
Ich hoffe, es lässt sich eines Tages besser ins Forum integrieren. Ich hab das JPGFish-Team gefragt, ob sie dafür API-Uploads erlauben könnten, dann könnten User die Thumbnails einfach hosten und die Codes direkt in ihre Nachricht kopieren... könnte sogar ein Button/Popup wie bei "Upload images" sein, aber bisher hab ich keine Antwort bekommen (ich schätze, das ist schwierig, weil dann viele Bots API-Uploads missbrauchen wollen würden):
Das Größenlimit von JPGFish ist 15MB, ich nehme "BBCode Medium", auch wenn das Thumbnail auf SimpCity nicht animiert ist... ich denke, wer sich eine Vorschau anschauen will, ist mit einem Klick einverstanden und bekommt dann die Überraschung, dass es animiert ist :KEKW:
Das kleine animierte Thumbnail (bei "BBCode Full") ist sowieso nicht groß genug, um viel zu erkennen... also, abgesehen davon, dass es mehr Clickbait ist, wiegt es meiner Meinung nach den Nachteil nicht auf, dass jeder User, der den Thread ansieht, bis zu 15MB pro Thumbnail laden muss (bei 10 davon lassen die Leute schon 150MB herunterladen 😓).
Zuletzt glaube ich, dass Staff/Mods "BBCode Medium" bevorzugen, weil es User zu JPGFish bringt und die dort Werbung anzeigen können, was die Server finanziert.
 
nattieivanova
Ich hab das Dropdown "VR Video" hinzugefügt, mit Optionen zum Zuschneiden der gängigsten Formate. Wie erwartet ist die Verarbeitung mit FFMPEG WASM ein No-Go, die Ressourcen im Browser sind zu begrenzt.

Außerdem hab ich die Eingabefelder ein bisschen umsortiert/neu gestaltet und einklappbare Fieldsets hinzugefügt, das sollte beim Scrollen am Handy etwas helfen. Und ich glaube, die Performance ist auch etwas besser geworden, ich hatte ein sinnloses Neuzeichnen des Headers, das kein sichtbares Problem verursacht hat und deshalb unentdeckt blieb.
Jedenfalls, hier ist v.2.1.0, gleiche URL.
 
Kennst du das, wenn du Thumbnails generierst und die automatischen Timestamps, die das Tool auswählt, die guten Stellen, die du zeigen wolltest, komplett verfehlen?
Damit ist jetzt Schluss! VidGrid-HTML v.2.2.0 bringt eine Möglichkeit, die „Auto"-Timestamps für jedes Ausgabeelement zu überschreiben, mit einem „Timestamp-Editor", in dem du jede einzelne Zelle deines Thumbnails nach Belieben festlegen kannst. Er mischt sich automatisch mit den automatischen Timestamps, wenn du nicht genug Marker angibst, und ignoriert die letzten, wenn du zu viele definierst.

Die Videovorschau im Editor ist auf Videos beschränkt, die du in deinem Browser öffnen und ansehen kannst. Bei nicht unterstützten Videos funktioniert der Editor trotzdem, nur eben ohne Vorschau.
Cooler Anwendungsfall: Wenn du ein Thumbnail mit 1x1 Zelle machst, lag der Timestamp vor diesem Feature automatisch in der Mitte des Videos, jetzt kannst du genau wählen, wo er sein soll... für animierte und statische Thumbnails!
 
Ich hab gerade eine neue Version veröffentlicht:
VidGird-HTML v.2.3.0
  • Aufgabenverwaltung statt Datei-Batches: Dateien hinzufügen, entfernen, erneut einreihen, alle erneut einreihen.
  • Verbesserter Timestamp-Editor für Mobilgeräte und Shortcuts.
  • Bessere Timestamp-Auflösung, wenn nicht genug eigene Marker gesetzt wurden; die Rastergröße lässt sich jetzt ändern, ohne die eigenen Timestamps zurückzusetzen.
  • Der Status eingeklappt/ausgeklappt der Optionsbereiche wird pro Preset gespeichert.
 
Großes Versionsupdate, gleiche URL:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.0.0
  • NEU - Grid-Template-Editor: Du kannst jetzt eigene Templates mit ungleichmäßigen Rastern erstellen, jenseits von Spalten*Zeilen.
    • Das funktioniert mit statischen und animierten Rastern und auch zusammen mit dem Timestamp-Editor, such das perfekte Bild für deine Zellen in voller Größe aus!




    • Hier ein paar Beispiele:




  • NEU - Einstellungen: 4 Themes, um das Aussehen der App zu ändern. „Vorschauen anzeigen" ist jetzt ein globaler Parameter. „Upload-Ziele" wurde in dieses Modal verschoben.








  • NEU- Kompakte Leiste, auf Mobilgeräten und Desktop: Wenn du viele Dateien hinzufügst, kann das Scrollen zum Starten/Ansehen des Verarbeitungsfortschritts nervig werden. Dafür erscheint jetzt automatisch oben eine neue Leiste, wenn das Verarbeitungspanel oben nicht sichtbar ist. Du kannst sie für das volle Erlebnis ausklappen (sogar um weitere Dateien hinzuzufügen, auch während der Verarbeitung) oder eingeklappt als Shortcut nutzen... nie wieder nach oben scrollen.




  • NEU- Stil-Anpassungen
    • Schriftart und Schriftgrößen für Timecode und Header:




    • Verbesserter Farbwähler für Hintergrund-/Textfarbe




  • NEU - 12 Standard-Presets mit verschiedenen Einstellungen, Grid-Templates/Größen. Du kannst sie nach Belieben bearbeiten/löschen... falls du bereits Einstellungen hattest, musst du den localStorage der App/Seite in deinem Browser löschen (google es).


  • FIXES - Insgesamt bessere Performance, leicht verbesserte FFMPEG-Instanzverwaltung, bessere Mobilunterstützung, besonders im Timestamp-Editor.
Wie gehabt: Wenn du Bugs findest oder Vorschläge hast, frag ruhig hier!
 
Kleines Versionsupdate, gleiche URL:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.1.1
  • NEU - Animierter Sequenz-Modus
    • Ersetzt das Raster und zeigt kurze Segmente nacheinander (sequenziell), wobei die gewählte Ausgabebreite beachtet wird (das Video wird skaliert). Die Overlays "Header-Metadaten anzeigen" und "Timecode" sind möglich, weil jedes Frame zusammengesetzt wird.


    • MP4-Encoding-Unterstützung für ALLE animierten Sequenzen
    • Hier ein paar Beispiele:

      WEBP "Statisch (Frame halten)"

      WEBP "Video (Segment abspielen)"





      MP4 "Video (Segment abspielen)"

  • NEU- Animierte Sequenz "Video mit Audio"
    • Wenn du in derselben Optionsgruppe unter "Render-Modus" "Video mit Audio" auswählst, wird FFMPEG benutzt, um Segmente direkt mit Audio aus dem Video zu schneiden und mit browserfreundlichen Codecs neu zu encodieren. Die Ausgabebreite wird beachtet, aber es gibt kein Overlay (Metadaten/Timecode). Dieser Modus erlaubt nur MP4-Ausgabe (weil das das einzige Format mit Audio ist).

      MP4 "Video mit Audio"

  • NEU- Upload-Ziel-Einstellungen "Erlaubte Erweiterungen" und "Max. Dateigröße", die geprüft werden, bevor versucht wird, eine erzeugte Ausgabe hochzuladen.


  • NEU - Audio-Bitrate und Spurenanzahl zu den Header-Metadaten hinzugefügt
  • NEU - 4 Standard-Presets für den Sequenz-Modus hinzugefügt.
  • FIXES - Kleines Memory Leak beim FFMPEG-Fallback und bei den Tastenkürzeln im Timestamp-Editor behoben.
Wie immer: Wenn ihr Bugs findet oder Vorschläge für neue Features habt, fragt einfach hier!
 
Du musst dich anmelden oder registrieren, um hier zu antworten.
Zurück
Oben