Strumenti VidGrid-HTML - Griglie di miniature video personalizzabili nel browser

N

NessaCRT4

Lurker
Iscritto dal
13 Aug 2023
Messaggi
471
Reazioni
0
Ciao!
Mi sono rotto di vedere così tanti post con solo un link a un video, senza anteprima, senza titolo... quindi ho deciso di impegnarmi un po' (e bruciare qualche token di LLM) per creare un nuovo strumento che renda facile a tutti creare belle anteprime di immagini.
Questo strumento funziona interamente nel browser; non devi scaricare né installare nessun software/app. Si può usare anche da mobile (Android/iOS) grazie al design responsive.


VidGrid-HTML
Griglie di miniature video personalizzabili nel browser
Provalo qui: https://vidgrid-html-87fe95.gitlab.io/
Funzionalità principali
  • Genera contact sheet in JPG o WebP animato per i video direttamente nel browser
  • Funziona in locale, nessun upload necessario
  • Preleva i frame a intervalli di tempo uniformi lungo tutto il video oppure in base a timestamp personalizzati che puoi impostare tu!
  • Griglia configurabile (colonne/righe), spaziatura, larghezza di output, timecode in overlay, colori, intestazione con metadati opzionale
  • Crea i tuoi preset con le opzioni che preferisci (salvati in locale nel tuo browser)
  • Elaborazione batch, download ZIP e supporto per upload/copia del link (limitato alle gallerie Chevereto con upload via API attivo; purtroppo non ancora JPGFish/JPG6)
  • Supporto base al ritaglio dei video VR (SBS e TB)
  • Privacy prima di tutto: tutta l'elaborazione avviene sul tuo dispositivo.
Esempi di output statico/fisso con varie opzioni:




Esempi di output animato con varie opzioni:



Limitazioni note
Questo strumento usa l'estrazione dei frame nativa del browser, quindi, come regola generale, se il video si riproduce nel tuo browser dovrebbe essere compatibile (consiglio: alcuni browser come Chrome supportano più codec video e quindi più file). Ho implementato un ripiego con FFmpeg WASM, ma è molto più lento e soggetto a limiti di memoria. Nel peggiore dei casi genera frame vuoti/falliti o salta il file se proprio non è utilizzabile. Non stupitevi se i formati vecchi e i vecchi codec video/audio non vengono elaborati correttamente... i browser oggi sanno fare molto di più, ma non tutto!
Grazie per averlo provato!
E grazie a Utopic per avermi dato un motivo per riprendere quel progetto che avevo abbandonato e per averlo testato per primo.
Ah, e ho reso VidGrid-HTML open-source (licenza MIT), se a qualcuno interessa il codice sorgente: https://gitlab.com/aknott001/vidgrid-html
Segnalazioni di bug, suggerimenti e feedback sono i benvenuti in questo thread.
 
Strumento fantastico, che bello che lo stiano sviluppando. Spero che la gente lo trovi utile.
 
Finalmente, cerco da giorni e trovo solo vecchi video di YouTube e istruzioni poco chiare sui "Contact sheet"
grazie per l'aiuto!
 
Grosso aggiornamento, la v.2.0.0 è uscita ed è online allo stesso URL di sopra.
Sono arrivate le miniature animate! e qualche fix.
Nuove opzioni "Output animato (WebP)" (si possono salvare anche come preset):

Esempio di output:


 
Sei un vero GOAT, che sfiga che l'hai fatto proprio quando ho fatto un post io :KEKWlaugh:
 
Grazie, c'è sempre un prossimo post... spero :KEKW:
Un consiglio che avevo dimenticato sulla dimensione del file delle miniature animate: a seconda di larghezza, FPS, qualità e compressione WebP, si arriva in fretta al limite di 15MB di JPG6. Le opzioni predefinite sono piuttosto generose in termini di qualità; si può scendere a qualità 75-80 e magari una larghezza minore per stare quasi sempre sotto il limite.
 
Lavoro della madonna! So che hai iniziato solo per fare qualcosa di semplice, ma è diventato un progetto grosso che vale la pena usare. Ottimo lavoro!
Hai in programma nuove funzionalità?
Ti consiglio di aggiungere anche un toggle VR, se possibile!
 
Cosa comporterebbe? Non mi occupo molto del formato VR, se hai dei video di esempio e cosa ti aspetteresti che facesse, magari ci do un'occhiata.
 
I video VR ormai sono per lo più Side by Side, quindi due immagini divise sullo schermo, una per ciascun occhio.
Usare un generatore di miniature (in questo caso il tuo) cattura un fotogramma (side by side) così com'è, perché sa che è un video. Però sporca il contenuto se vuoi fornire screencap completi.
Usando SCS https://vongoob9.gitlab.io/subtitles_contact_sheet_qt/
Ha un interruttore VR, quindi scarta un occhio e tiene l'altro, il risultato è più griglie di contenuto sullo schermo e un file a risoluzione più bassa
Quindi puoi anche ritrovarti con una bomba come questa da mettere come piccola anteprima su torrent/bbs ecc.
 
nattieivanova
Capisco, grazie delle spiegazioni, penso di riuscire a fare qualcosa per i formati SBS, senza correzione fisheye però... dovrebbe funzionare anche per le griglie animate.
Ho appena sperimentato un po' con i filtri FFMPEG WASM per correggere l'effetto fisheye e altri formati, ci sono un sacco di opzioni: https://ffmpeg.org/ffmpeg-filters.html#v360
Ma la triste realtà dell'elaborazione nel browser è che siamo limitati sia in memoria che in thread CPU. Senza entrare troppo nei dettagli, internamente deve prima caricare il file nella memoria del browser, e sopra qualche centinaio di MB fatica (non voglio nemmeno pensare di farlo su mobile)... e i file VR di solito sono grandi almeno qualche GB... ma credo che una semplice "modalità VR" con la scelta dell'occhio sinistro/destro sarebbe già una bella aggiunta, quindi ci lavorerò presto. Grazie del suggerimento!
 
Che strumento, comodissimo e usabile su Android! Grazie aknott! Assolutamente fantastico e impressionante. SimpCity ha un limite di dimensioni per i webp? Tipo le gif, magari? Credo che si possa postare solo come visualizzazione diretta, o bbcode full, linkato, il webp? Io cerco di tenere le mie gif sotto i 3MB.
 
Devi caricare su jpg6 il file .jpg / .gif / .webp che generi con lo strumento e poi importarlo nel tuo post come una normale immagine.
Meglio non fare gif pesanti per le prestazioni del forum comunque. Inoltre jpg6 ha comunque un limite di dimensione dei file, quindi se la gif è troppo pesante non te la lascia caricare.
 
Di niente, felice che sia utile! :pepoLove:
Spero che un giorno si possa integrare di più col forum, ho chiesto allo staff di JPGFish se potessero permettere upload via API per questo, così gli utenti potrebbero hostare facilmente le miniature e copiare i codici nel messaggio... potrebbe essere anche un pulsante/popup come "Upload images", ma per ora non ho avuto risposta (immagino sia difficile, tanti bot vorrebbero abusare degli upload API):
Il limite di dimensione di JPGFish è 15MB, io uso "BBCode Medium" anche se la miniatura non è animata su SimpCity... immagino che chiunque voglia guardare un'anteprima sia ok con un click e si becchi la sorpresa che è animata :KEKW:
La piccola miniatura animata (se usi "BBCode Full") comunque non è abbastanza grande per vedere granché... quindi oltre a essere più clickbait, non credo che compensi lo svantaggio di caricare fino a 15MB per miniatura per ogni utente che guarda il thread (10 così e hai fatto scaricare 150MB alla gente 😓).
Infine penso che staff/moderatori preferiscano "BBCode Medium" perché porta utenti su JPGFish e permette di mostrare pubblicità, che aiuta a finanziare i server.
 
nattieivanova
Ho aggiunto il menu a tendina "VR Video" con opzioni per ritagliare i formati più comuni. Come previsto l'elaborazione con FFMPEG WASM non è fattibile, le risorse nel browser sono troppo limitate.

Ho anche riordinato/ridisegnato un po' i campi di input e aggiunto fieldset comprimibili, dovrebbe aiutare un po' con lo scroll su mobile. E credo di aver migliorato un po' le prestazioni, avevo un ridisegno inutile dell'header che non causava nessun problema visibile, quindi era passato inosservato.
Comunque, ecco la v.2.1.0, stesso URL.
 
Ti è mai capitato di generare thumbnail e che i timestamp automatici scelti dallo strumento mancassero del tutto le parti migliori che volevi mostrare?
Bene, basta! VidGrid-HTML v.2.2.0 introduce un modo per sovrascrivere i timestamp "auto" per ogni elemento in output, con un "Editor dei timestamp" che ti permette di definire ogni singola cella della thumbnail come vuoi. Si unisce automaticamente ai timestamp automatici se non specifichi abbastanza marcatori, e ignora gli ultimi se ne definisci troppi.

L'anteprima video nell'editor è limitata ai video che puoi aprire e guardare nel browser; per i video non supportati l'editor funziona comunque, solo senza anteprima.
Uso interessante: se fai una thumbnail con 1x1 celle, prima di questa funzione il timestamp era automaticamente a metà video, ora puoi scegliere esattamente dove vuoi... per thumbnail animate e statiche!
 
Ho appena rilasciato una nuova versione:
VidGird-HTML v.2.3.0
  • Gestione dei task al posto dei batch di file: aggiungi file, rimuovi, rimetti in coda, rimetti in coda tutto.
  • Editor dei timestamp migliorato per mobile e scorciatoie.
  • Risoluzione dei timestamp migliorata quando non sono stati impostati abbastanza marcatori personalizzati; ora la dimensione della griglia si può cambiare senza resettare i timestamp personalizzati.
  • Lo stato chiuso/aperto delle sezioni delle opzioni viene salvato per ogni preset.
 
Aggiornamento di versione importante, stesso URL:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.0.0
  • NUOVO - Editor dei template della griglia: ora puoi creare template personalizzati di griglie irregolari, oltre a colonne*righe.
    • Funziona con griglie statiche e animate e anche insieme all'Editor dei timestamp, scegli l'immagine perfetta per le tue celle a dimensione piena!




    • Ecco alcuni esempi:




  • NUOVO - Impostazioni: 4 temi per cambiare l'aspetto dell'app. "Mostra anteprime" ora è un parametro globale. "Destinazioni di upload" è stato spostato in questa finestra.








  • NUOVO- Barra compatta, su mobile e desktop: quando aggiungi tanti file può diventare noioso scorrere per avviare/vedere l'avanzamento dell'elaborazione. Per aiutarti, una nuova barra compare automaticamente in alto quando il pannello Elaborazione in alto non è visibile. Puoi espanderla per l'esperienza completa (anche per aggiungere altri file, pure durante l'elaborazione), o usarla chiusa come scorciatoia... basta scorrere di nuovo in cima.




  • NUOVO- Personalizzazione dello stile
    • Famiglia e dimensioni del font per timecode e intestazione:




    • Selettore colore migliorato per il colore di sfondo/testo




  • NUOVO - 12 preset predefiniti con varie impostazioni, template/dimensioni della griglia. Puoi modificarli/eliminarli a piacere... se avevi già delle impostazioni, dovrai eliminare/svuotare il localStorage dell'app/sito nel browser (cerca su Google).


  • FIX - Prestazioni migliori in generale, gestione delle istanze FFMPEG leggermente migliorata, miglior supporto mobile, soprattutto nell'Editor dei timestamp.
Come sempre, se trovi bug o hai suggerimenti, chiedi pure qui!
 
Aggiornamento minore di versione, stesso URL:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.1.1
  • NOVITÀ - Modalità Sequenza animata
    • Sostituisce la griglia e mostra brevi segmenti uno dopo l'altro (in sequenza), rispettando la larghezza di output scelta (scala il video), permette gli overlay "Mostra metadati intestazione" e "Timecode" perché ogni frame viene composto.


    • Supporto alla codifica MP4 per TUTTE le sequenze animate
    • Ecco alcuni esempi:

      WEBP "Statico (mantieni frame)"

      WEBP "Video (riproduci segmento)"





      MP4 "Video (riproduci segmento)"

  • NOVITÀ- Sequenza animata "Video con audio"
    • Nello stesso gruppo di opzioni, se selezioni "Video con audio" sotto "Modalità di rendering", FFMPEG verrà usato per tagliare segmenti del video direttamente con l'audio e ricodificarli con codec compatibili con i browser. La larghezza di output viene rispettata ma non c'è overlay (metadati/timecode). Questa modalità permette solo output MP4 (perché è l'unico formato che supporta l'audio).

      MP4 "Video con audio"

  • NOVITÀ- Impostazioni della destinazione di upload "Estensioni consentite" e "Dimensione max file", considerate prima di tentare l'upload di un output generato.


  • NOVITÀ - Bitrate audio e numero di tracce aggiunti ai metadati dell'intestazione
  • NOVITÀ - Aggiunti 4 preset predefiniti per la modalità Sequenza.
  • FIX - Risolto un piccolo memory leak nel fallback FFMPEG e nelle scorciatoie da tastiera dell'Editor dei timestamp.
Come sempre, se trovate bug o avete suggerimenti per nuove funzioni, chiedete pure qui!
 
Devi accedere o registrarti per rispondere qui.
Indietro
Top