ツール VidGrid-HTML - ブラウザでカスタマイズ可能な動画サムネイルグリッド

N

NessaCRT4

ROM専
登録日
2023年8月13日
投稿
471
リアクションスコア
0
こんにちは!
動画のリンクだけ貼ってプレビューもタイトルもない投稿をたくさん見るのにうんざりしたので、ちょっと頑張って(LLMのトークンもそこそこ燃やして)、誰でも簡単にキレイな画像プレビューを作れる新しいツールを作ってみました。
このツールは完全にブラウザ上で動きます。ソフトやアプリのダウンロード・インストールは一切不要です。レスポンシブ対応なのでモバイル(Android/iOS)でも使えます。


VidGrid-HTML
ブラウザで使えるカスタマイズ可能な動画サムネイルグリッド
ここで試せます: https://vidgrid-html-87fe95.gitlab.io/
主な機能
  • ブラウザ上で動画のコンタクトシートをJPGまたはアニメーションWebPで生成
  • ローカルで動作、アップロード不要
  • 動画全体から等間隔のタイムスタンプでフレームを抽出 または自分で指定したカスタムタイムスタンプでも抽出できます!
  • グリッドレイアウト(列/行)、間隔、出力幅、タイムコード表示、色、メタデータヘッダー(任意)を設定可能
  • お好みの設定で自分だけのプリセットを作成(ブラウザ内にローカル保存)
  • 一括処理、ZIPダウンロード、アップロード/リンクコピーに対応(APIアップロードが有効なCheveretoギャラリーのみ。残念ながらJPGFish/JPG6はまだ非対応)
  • VR動画の基本的なクロップに対応(SBSとTB)
  • プライバシー最優先:処理はすべてあなたのデバイス上で行われます。
さまざまな設定での静止画出力の例:




さまざまな設定でのアニメーション出力の例:



既知の制限事項
このツールはブラウザ標準のフレーム抽出を使っているので、目安として、ブラウザで再生できる動画なら対応しているはずです(ヒント:Chromeのようにより多くのコーデックに対応しているブラウザだと、扱えるファイルも増えます)。FFmpeg WASMによるフォールバックも実装しましたが、かなり遅くてメモリ制限もあります。最悪の場合、空白/失敗したフレームが出るか、本当に使えないファイルはスキップされます。古い形式や古い動画/音声コーデックがうまく処理できなくても驚かないでください…最近のブラウザはかなり多くのことができますが、何でもできるわけではないので!
見てくれてありがとう!
そして、放置していたこのプロジェクトに戻るきっかけをくれて、最初にテストもしてくれたUtopicにも感謝です。
あと、VidGrid-HTMLはオープンソース(MITライセンス)にしてあるので、ソースコードに興味がある人はこちらへ: https://gitlab.com/aknott001/vidgrid-html
バグ報告、提案、フィードバックはこのスレで大歓迎です。
 
最高のツール、開発してくれて嬉しい。みんなの役に立つといいな。
 
やっと来た、何日も探してたのに出てくるのは古いYouTube動画と「コンタクトシート」のよくわからない説明ばっかりだった
助かりました、ありがとう!
 
大型アップデート、v.2.0.0をリリースしました。上と同じURLで公開中です。
アニメーションサムネイルに対応!ほかにいくつか修正も。
新しい「アニメーション出力(WebP)」オプション(プリセットとしても保存できます):

出力例:


 
マジでGOATだわ、俺が投稿したタイミングでこれ作るとかタイミング最悪w :KEKWlaugh:
 
ありがとう、次の投稿はいつでもあるさ…たぶん :KEKW:
アニメーションサムネイルのファイルサイズについて言い忘れてたコツがあります。幅、FPS、画質、WebP圧縮によっては、すぐにJPG6の15MB制限に達します。デフォルト設定は画質がかなり高めなので、画質を75〜80に下げて、必要なら幅も少し狭くすれば、ほぼ確実に制限内に収まります。
 
すごい出来!最初は簡単なものを作るだけのつもりだったのは知ってるけど、使う価値のある大きなプロジェクトになったね。お疲れ様!
今後追加する予定の機能はある?
できればVR切り替えのトグルも付けてほしい!
 
それって具体的に何をするもの?VR形式はあまり触らないんだけど、サンプル動画とどういう動作を期待してるか教えてくれたら、見てみるかも。
 
VR動画は今はほとんどSide by Sideで、画面が左右の目用に2枚の画像に分かれてる。
サムネ作成ツール(今回は君のやつ)を使うと、動画だと認識してるからフレームをそのまま(side by sideのまま)キャプチャする。ただ、フルのスクショを出したい場合は内容がごちゃごちゃになる。
SCSを使うと https://vongoob9.gitlab.io/subtitles_contact_sheet_qt/
VRトグルがあって、片目を捨ててもう片方だけ残すから、画面上のコンテンツグリッドが増えるし、ファイルの解像度も小さくなる
だからこんな神サムネもできて、torrentやbbsなんかの小さいプレビューに使える
 
nattieivanova
なるほど、説明ありがとう。SBS形式なら魚眼補正なしでなんとかできそう…アニメーションのグリッドでも動くはず。
ちょうどFFMPEG WASMのフィルターで魚眼効果とか他の形式を補正するのを少し試したんだけど、オプションがめちゃくちゃ多い: https://ffmpeg.org/ffmpeg-filters.html#v360
でもブラウザ処理の残念な現実として、メモリもCPUスレッドも限られてる。細かい話は省くけど、内部的にまずファイルをブラウザのメモリに読み込む必要があって、数百MBを超えると厳しい(モバイルでやるなんて考えたくもない)…しかもVRファイルは普通最低でも数GBある…でも左目/右目を選べるシンプルな「VRモード」ならすぐ追加できそうだから、近いうちに作るよ。提案ありがとう!
 
なんてツールだ、超便利でAndroidでも使える!ありがとう aknott!マジですごいし感動した。SimpCityってwebpにサイズ制限ある?gifみたいに?webpは直接表示か、BBCode fullでリンクとしてしか投稿できないのかな?自分はgifを3MB以下に抑えるようにしてる。
 
.jpg / .gif / .webpどれでもツールで作ったファイルをjpg6にアップして、普通の画像として投稿に挿入する必要がある。
ただフォーラムの動作のためにも重いgifは作らない方がいい。それにjpg6にはどのみちファイルサイズ制限があるから、gifが重すぎるとアップできないよ。
 
どういたしまして、役に立ってよかった!:pepoLove:
いつかフォーラムともっと連携できたらいいな。JPGFishのスタッフに、これ用にAPIアップロードを許可してもらえないか聞いてみた。そうすればユーザーが簡単にサムネをホストしてコードをそのまま投稿にコピペできるし…"Upload images"みたいなボタン/ポップアップにもできるかも。でも今のところ返事なし(難しいんだろうな、API アップロードを悪用したがるボットが山ほどいそうだし):
JPGFishのサイズ制限は15MBで、SimpCityだとサムネが動かなくても俺は"BBCode Medium"を使ってる…プレビューを見たい人ならワンクリックくらい気にしないだろうし、そこで動くって分かって驚くはず :KEKW:
小さい動くサムネ("BBCode Full"を使った場合)は、そもそも小さすぎてほとんど見えないし…釣り感が強くなる以外、スレを開く全ユーザーがサムネ1個につき最大15MBも読み込むデメリットに見合わないと思う(これが10個あったら150MBもダウンロードさせることになる 😓)。
最後に、スタッフ/モデレーターが"BBCode Medium"を好むのは、ユーザーをJPGFishに誘導して広告を表示できて、サーバー代の足しになるからだと思う。
 
nattieivanova
「VR Video」ドロップダウンを追加して、一般的な形式をクロップできるオプションを入れた。予想通りFFMPEG WASMでの処理は無理だった、ブラウザのリソースが限られすぎてる。

入力フィールドの並び順とデザインも少し変えて、折りたたみ式のfieldsetも追加した。モバイルでのスクロールが少しは楽になるはず。パフォーマンスも少し改善したと思う。ヘッダーに無駄な再描画があったけど、目に見える問題は起きてなかったから気づかれてなかった。
とにかく、v.2.1.0はこちら、URLは同じ。
 
サムネ作ってたら、ツールが自動で選んだタイムスタンプが見せたかった良いシーンを全然拾ってくれなかったこと、ない?
もう大丈夫!VidGrid-HTML v.2.2.0では、出力アイテムごとに「自動」タイムスタンプを上書きできるようになった。「タイムスタンプエディタ」でサムネの各セルを好きなように指定できるよ。マーカーが足りなければ自動タイムスタンプと自動でマージされるし、多すぎれば最後のぶんは無視される。

エディタ内の動画プレビューは、ブラウザで開いて再生できる動画に限られる。非対応の動画でもエディタ自体は使えるけど、プレビューなしになる。
便利な使い方:1x1セルのサムネを作る場合、この機能の前はタイムスタンプが自動で動画の真ん中だったけど、今は好きな位置をピンポイントで選べる…アニメサムネでも静止画サムネでもOK!
 
新バージョンをリリースしたよ:
VidGird-HTML v.2.3.0
  • ファイルのバッチの代わりにタスク管理:ファイル追加、削除、再キュー、全て再キュー。
  • モバイルとショートカット向けにタイムスタンプエディタを改善。
  • カスタムマーカーが足りない時のタイムスタンプ解決を改善。カスタムタイムスタンプをリセットせずにグリッドサイズを変更できるようになった。
  • オプションセクションの開閉状態をプリセットごとに保存。
 
メジャーバージョンアップ、URLは同じ:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.0.0
  • NEW - グリッドテンプレートエディタ:列*行にとらわれない、不均一なグリッドのカスタムテンプレートを作れるようになった。
    • 静止画グリッドでもアニメグリッドでも使えるし、タイムスタンプエディタとも連携するから、フルサイズのセルに最高の1枚を選べる!




    • 例はこちら:




  • NEW - 設定:アプリの見た目を変えられるテーマを4種類追加。「プレビューを表示」はグローバル設定に変更。「アップロード先」もこのモーダルに移動。








  • NEW- コンパクトバー(モバイル・デスクトップ両方):ファイルをたくさん追加すると、処理を開始したり進捗を見るためにスクロールするのが面倒になる。そこで、上部の処理パネルが見えていない時に、新しいバーが自動で上に表示されるようにした。展開すればフル機能(処理中でもファイル追加OK)、折りたたんだままショートカットとして使ってもOK…もう一番上までスクロールで戻らなくていい。




  • NEW- スタイルのカスタマイズ
    • タイムコードとヘッダーのフォントファミリーとフォントサイズ:




    • 背景色/文字色のカラーピッカーを改善




  • NEW - さまざまな設定やグリッドテンプレート/サイズ入りのデフォルトプリセットを12個追加。自由に編集/削除できる…既存の設定がある人は、ブラウザでアプリ/サイトのlocalStorageを削除/クリアする必要あり(ググってね)。


  • 修正 - 全体的にパフォーマンス向上、FFMPEGインスタンスの扱いを少し改善、特にタイムスタンプエディタでのモバイル対応を強化。
これまで通り、バグや要望があればここで気軽に聞いてね!
 
マイナーバージョンアップ、URLは同じ:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.1.1
  • 新機能 - アニメーションシーケンスモード
    • グリッドの代わりに短いセグメントを順番に(シーケンシャルに)表示します。選んだ出力幅を守り(動画は拡大縮小されます)、各フレームを合成するので「ヘッダーメタデータを表示」と「タイムコード」のオーバーレイも使えます。


    • すべてのアニメーションシーケンスでMP4形式のエンコードに対応
    • 例はこちら:

      WEBP「静止(フレーム保持)」

      WEBP「動画(セグメント再生)」





      MP4「動画(セグメント再生)」

  • 新機能- アニメーションシーケンス「音声付き動画」
    • 同じオプショングループで「レンダーモード」の「音声付き動画」を選ぶと、FFMPEGで動画から音声ごとセグメントを切り出し、ブラウザ対応のコーデックで再エンコードします。出力幅は守られますが、オーバーレイ(メタデータ/タイムコード)はありません。このモードはMP4出力のみです(音声を扱える唯一の形式なので)。

      MP4「音声付き動画」

  • 新機能- アップロード先の設定に「許可する拡張子」と「最大ファイルサイズ」を追加。生成した出力をアップロードする前にチェックされます。


  • 新機能 - ヘッダーメタデータに音声ビットレートとトラック数を追加
  • 新機能 - シーケンスモード用のデフォルトプリセットを4つ追加。
  • 修正 - FFMPEGフォールバックとタイムスタンプエディタのキーボードショートカットの軽微なメモリリークを修正。
今まで通り、バグを見つけたり新機能の提案があったら、気軽にここで聞いてください!
 
thotnow あ、URLのタイプミスです。最後に「l」(小文字のL)が抜けてたので、そのプロジェクトは存在しなくて、Gitlabがアクセスにアカウントが必要だと思ってるのかも。すみません。
正しいリンクはこちら: https://gitlab.com/aknott001/vidgrid-html
でもツールを使うだけならそこに行く必要はなくて、ツールのURLはこっち: https://vidgrid-html-87fe95.gitlab.io/
 
ここに返信するにはログインまたは新規登録が必要です。
戻る
トップ