**Show HN：VAM Seek – 2次元ビデオナビゲーショングリッド、15 KB、サーバー負荷ゼロ**

VAM Seek – 2D ビデオセークマーカー

概要

ストリーミングサイト向けの軽量 2D ビデオセークグリッドライブラリです。1 次元のスクロールバーではなく、サムネイルグリッドを視覚的に利用して動画をナビゲートします。クライアント側でフレーム抽出と滑らかなマーカーアニメーションを実装しています。

• 盲目的なスクラブは不要です。すべてのシーンが一目で分かります。

なぜ VAM Seek なのか？

キーワード: ビデオプレイヤー、ビデオセーク、サムネイルグリッド、動画ナビゲーション、HTML5 video、JavaScript ライブラリ、動画ストリーミング、メディアプレイヤー、動画コントロール、動画サムネイル、セークバー代替、動画 UX

クイックスタート（外部サイト向け）

<!-- 1. スクリプトを追加 -->
<script src="https://cdn.jsdelivr.net/gh/unhaya/vam-seek/dist/vam-seek.js"></script>

<!-- 2. 動画に接続 -->
<script>
  VAMSeek.init({
    video: document.getElementById('myVideo'),
    container: document.getElementById('seekGrid'),
    columns: 5,
    secondsPerCell: 15
  });
</script>

詳細は

docs/INTEGRATION.md

主な機能

• クライアント側フレーム抽出 – サーバー CPU 使用量ゼロ
• LRU キャッシュ – メモリに200フレームまで保持
• 滑らかなマーカーアニメーション –

  requestAnimationFrame

  で60 fps
• VAM アルゴリズム – 正確なタイムスタンプ計算
• フレームワーク対応 – React、Vue、Vanilla JS のサンプルを含む

プライバシーとアーキテクチャ

動画はブラウザ内に留まります。従来のサムネイルシステムでは動画をサーバーへアップロードし、FFmpeg で処理・サムネイル保存・CDN 配信を行いますが、これはコストや時間、プライバシーリスクが高いです。

すべてのフレーム抽出はユーザー側のブラウザで Canvas API を利用して行われます。ページを閉じると、データは完全に消去され、サーバーへ送信されることはありません。

ディレクトリ構成

VAM_web/
├── dist/                       # 配布用ファイル
│   └── vam-seek.js             # 独立型ライブラリ（約15 KB）
├── docs/                       # ドキュメント
│   └── INTEGRATION.md          # API 統合ガイド
├── examples/                   # 統合作品例
│   ├── basic-integration.html  # Vanilla JS サンプル
│   ├── react-integration.jsx   # React コンポーネント & フック
│   └── vue-integration.vue     # Vue 3 コンポーネント
├── backend/                    # FastAPI デモバックエンド（演示用）
│   ├── main.py                 # エントリポイント、静的ファイル配信
│   ├── requirements.txt        # Python 依存関係
│   ├── core/
│   │   ├── grid_calc.py        # VAM グリッド計算
│   │   └── video_utils.py      # FFmpeg 処理
│   ├── models/
│   │   └── schemas.py          # リクエスト/レスポンスモデル
│   ├── routers/
│   │   ├── grid.py             # /api/grid/* エンドポイント
│   │   └── video.py            # /api/video/* エンドポイント
│   ├── uploads/                # アップロード動画（gitignore）
│   └── thumbnails/             # 生成サムネイル（gitignore）
├── frontend/                   # デモフロントエンド
│   ├── index.html              # メイン UI と埋め込み JS
│   └── assets/
│       └── marker.svg          # グリッドマーカーアイコン
├── .gitignore
└── README.md

ライブラリ利用者向け

インストールオプション

• CDN（推奨）

  <script src="https://cdn.jsdelivr.net/gh/unhaya/vam-seek/dist/vam-seek.js"></script>
  

• npm (示しません)

基本使用例

const vam = VAMSeek.init({
  video: document.getElementById('video'),
  container: document.getElementById('grid'),
  columns: 5,
  secondsPerCell: 15,
  onSeek: (time, cell) => {
    console.log(`シーク先：${time}s`);
  }
});

// API
vam.seekTo(120);               // 2:00 にシーク
vam.moveToCell(2, 3);          // 列2、行3へ移動
vam.configure({ columns: 8 }); // 設定を更新
vam.destroy();                 // 後片付け

設定表

video

container

columns

secondsPerCell

cacheSize

onSeek

デモ開発者向け

必要条件

• Python 3.9+
• FFmpeg（PATH にあること）

設定手順

cd backend
pip install -r requirements.txt
python main.py

http://localhost:8000 をブラウザで開いてください。

API エンドポイント

技術詳細

フレーム抽出（クライアント側）

// 1. 隠し video 要素作成
const video = document.createElement('video');
video.src = 'video.mp4';

// 2. タイムスタンプへシーク
video.currentTime = 15.0;

// 3. seeked イベントでキャプチャ
video.addEventListener('seeked', () => {
  const canvas = document.createElement('canvas');
  ctx.drawImage(video, 0, 0);
  const dataUrl = canvas.toDataURL('image/jpeg', 0.8);
});

// 4. LRU キャッシュに保存（最大200フレーム）
frameCache.put(videoSrc, timestamp, dataUrl);

VAM アルゴリズム

function calculateTimestamp(x, y, gridWidth, gridHeight, duration, secondsPerCell) {
  const rowIndex = Math.floor(y / gridHeight * rows);
  const colContinuous = x / gridWidth * columns;
  const cellIndex = rowIndex * columns + colContinuous;
  return Math.min(cellIndex * secondsPerCell, duration);
}

キーボードショートカット

対応ブラウザ

• Chrome 80+
• Firefox 75+
• Safari 14+
• Edge 80+
• モバイルブラウザ

ライセンス

個人・教育・研究利用は無料です。商用利用には有料ライセンスが必要です。お問い合わせ：

info@haasiy.jp

開発履歴

vam-seek.js

クレジット

VAM Desktop アプリケーションのアルゴリズムをベースにしています：

• vam5.70/utils/video_utils.py

  –

  calculate_x_continuous_timestamp

• vam5.70/gui/preview/core/grid_calculator.py

  –

  GridCalculator