Resolved

MP4 video thumbnails show static images instead of motion previews

FFmpeg
Video Processing
Frontend
Astro
EXIF
Metadata
Media
UI/UX

Video stock pages displayed only static JPG frames for MP4 files | Missing critical metadata like framerate and color profile | DJI camera info not detected in EXIF tags

The project addressed the limitations of static JPG thumbnails for MP4 video files in a stock footage system, aiming to provide dynamic motion previews while extending metadata extraction and improving display layout. The goal was to replace static images with optimized video previews, extract critical technical metadata (e.g., framerate, color profiles), and enhance the hierarchy of displayed information for better user experience.

Issue

Stock video pages displayed only static JPG thumbnails for MP4 files, failing to showcase motion quality—a critical factor for potential buyers. Additionally, critical metadata was missing from the display:

  • Framerate values (e.g., 25fps or 30fps), which are essential for video quality assessment.
  • Color profiles (e.g., S-Log3 or D-Log M), which define the color space and dynamic range of the footage.
  • DJI camera information, which was undetected due to non-standard EXIF tag usage (e.g., Encoder tag instead of Make/Model).

Furthermore, the display layout prioritized camera specifications over technical specs (e.g., resolution, framerate), which was counterintuitive for video assets where technical details often influence purchasing decisions.

Culprit

Static Thumbnails

The system generated only single-frame JPG previews using basic FFmpeg commands, ignoring the temporal dimension of video assets. While the original MP4 files were too large for practical previews, no intermediate solution existed to provide a dynamic representation.

Metadata Gaps

The metadata extraction process only parsed basic EXIF tags and failed to extract:

  1. Video frame rate (VideoFrameRate), which is essential for assessing motion quality.
  2. Color profiles and transfer characteristics (ColorProfiles, TransferCharacteristics), which are critical for color grading and dynamic range information.
  3. DJI-specific metadata, as the Encoder tag was not being mapped correctly to camera identification fields.

Display Hierarchy

The CSS and Astro template lacked proper spacing modifiers and logical organization. Camera information was displayed before technical specs, creating a disjointed user experience for video assets.

Solution

Video Preview Generation

The solution involved generating 5-second, 360p MP4 previews (~250KB) using optimized FFmpeg parameters. Key optimizations included:

  • Limiting preview duration to 5 seconds to ensure sufficient motion representation without excessive file size.
  • Scaling the video to 360p while maintaining aspect ratio to balance quality and file size.
  • Using aggressive compression settings (-crf 28) to target a compact file size (~250KB) for efficient loading.
  • Stripping audio (-an) to further reduce file size.

Extended Metadata Extraction

The metadata extraction process was expanded to include:

  • Framerate extraction from the VideoFrameRate EXIF tag to display accurate motion information.
  • Color profile detection, including fallbacks to TransferCharacteristics if ColorProfiles were unavailable.
  • DJI-specific detection logic, mapping the Encoder tag to camera identification fields when standard EXIF tags were missing.

Display Implementation

The display was restructured to prioritize technical specs for video assets:

  1. Video Player Component: Integrated an in-page video player with a poster image fallback for static display.
  2. Play Indicator Overlay: Added a play button overlay to emphasize interactivity and motion.
  3. Reordered Specs Layout: Organized technical details in a logical hierarchy:
    • Primary row: Resolution, framerate, file size, and type.
    • Secondary row: Camera model, sensor specifications, and size.
    • Tertiary row: Color profile information.
  4. Tight Spacing CSS: Applied CSS classes to ensure proper spacing and readability.

Sensor Database Update

The sensor database was updated to include DJI Mavic 4 specifications, ensuring accurate metadata display for DJI footage.

This approach ensured dynamic video previews, comprehensive metadata extraction, and an intuitive display hierarchy, enhancing the user experience and technical accuracy of the stock footage system.