Add script to generate video poster images with auto-detection

docs/public/videos/README.md

@@ -29,19 +29,53 @@ import Video from '@components/Video.astro';
 - Consider adding poster images (thumbnails) for better UX
 - Compress videos appropriately for web use
 
+## Generating Poster Images
+
+Poster images (video thumbnails) provide a better user experience by showing a preview frame before the video loads. Poster images are automatically detected by the Video component - they should be placed alongside video files with the same name but a `.png` extension.
+
+For example:
+- `create-workflow.mp4` → `create-workflow.png` (poster)
+- `demo.mp4` → `demo.png` (poster)
+
+To generate poster images for all videos in this directory:
+
+```bash
+# From the repository root
+./scripts/generate-video-posters.sh
+```
+
+This script will:
+- Extract a frame at 1 second from each MP4 video
+- Generate high-quality PNG poster images (1920x1080)
+- Save them alongside the video files with `.png` extension
+
+The Video component automatically detects and uses these poster images:
+
+```mdx
+<Video 
+  src="/gh-aw/videos/demo.mp4"
+  caption="Demo video"
+/>
+```
+
+No need to specify the `thumbnail` prop - it's automatically derived from the video path!
+
 ## Example
 
 To add a new video to the documentation:
 
 1. Place the video file in this directory: `docs/public/videos/demo.mp4`
-2. Reference it in your MDX file:
+2. Generate the poster image: `./scripts/generate-video-posters.sh`
+3. Reference it in your MDX file:
 
 ```mdx
 import Video from '@components/Video.astro';
 
 <Video 
   src="/gh-aw/videos/demo.mp4" 
   caption="Workflow Demo"
-  thumbnail="/gh-aw/images/demo-thumbnail.png"
+  aspectRatio="16:9"
 />
 ```
+
+The poster image (`demo.png`) will be automatically detected and used.

docs/src/components/Video.astro

@@ -37,6 +37,10 @@ const videoFormats: Record<string, string> = {
 }
 const contentType = videoFormats[fileExtension] || 'video/mp4'
 
+// Auto-detect poster image: replace video extension with .png
+// If no explicit thumbnail is provided, assume poster exists with same name
+const posterPath = thumbnail || src.replace(/\.[^.]+$/, '.png')
+
 // Calculate aspect ratio padding
 const ratioMap: Record<string, string> = {
     '16:9': '56.25%',
@@ -56,7 +60,7 @@ const paddingBottom = ratioMap[aspectRatio]
             autoplay={autoStart}
             loop={repeat}
             muted={silenced}
-            poster={thumbnail}
+            poster={posterPath}
             preload="metadata"
             aria-label={caption}
         >

scripts/generate-video-posters.sh

@@ -0,0 +1,61 @@
+#!/usr/bin/env bash
+set -e
+
+# Script to generate web-optimized poster images from videos in docs/public/videos
+# Posters are extracted at 1 second into the video and saved as PNG files
+# alongside the video files (same directory, with .png extension)
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
+VIDEOS_DIR="$REPO_ROOT/docs/public/videos"
+
+# Check if ffmpeg is installed
+if ! command -v ffmpeg &> /dev/null; then
+    echo "Error: ffmpeg is not installed. Please install it first:"
+    echo "  Ubuntu/Debian: sudo apt-get install ffmpeg"
+    echo "  macOS: brew install ffmpeg"
+    exit 1
+fi
+
+echo "Generating poster images from videos in $VIDEOS_DIR"
+echo "Posters will be saved alongside video files with .png extension"
+echo ""
+
+# Process each MP4 video file
+for video in "$VIDEOS_DIR"/*.mp4; do
+    if [ ! -f "$video" ]; then
+        echo "No video files found in $VIDEOS_DIR"
+        exit 1
+    fi
+
+    # Get the base filename without extension
+    basename=$(basename "$video" .mp4)
+
+    # Generate the output poster filename (PNG in same directory as video)
+    poster="$VIDEOS_DIR/${basename}.png"
+
+    echo "Processing: $basename.mp4"
+    echo "  → Extracting frame at 1 second..."
+
+    # Extract frame at 1 second, scale to maintain quality
+    # -ss 1: Seek to 1 second
+    # -i: Input file
+    # -vframes 1: Extract only 1 frame
+    # -q:v 2: High quality (1-31 scale, 2 is very high quality)
+    # -vf scale: Ensure output is proper size
+    ffmpeg -ss 1 -i "$video" -vframes 1 -q:v 2 -vf "scale=1920:1080:force_original_aspect_ratio=decrease" "$poster" -y 2>&1 | grep -v "frame=" || true
+
+    if [ -f "$poster" ]; then
+        size=$(du -h "$poster" | cut -f1)
+        echo "  ✓ Generated: $(basename "$poster") ($size)"
+    else
+        echo "  ✗ Failed to generate poster"
+        exit 1
+    fi
+    echo ""
+done
+
+echo "✓ All poster images generated successfully!"
+echo ""
+echo "Generated files:"
+ls -lh "$VIDEOS_DIR"/*.png 2>/dev/null || true