---
title: "Media Support Sample"
pubDate: 2026-10-25
category: tech
tags: [test, hidden]
# 视觉/管线测试样张：draft:true 会被 getStaticPaths 全链路过滤（无静态产物），
# 故用非 draft + hidden 标记保证 /archives/media-sample/ 产物存在；视觉测试完成后应删除本篇
draft: false
locked: true
---

This post is a three-media pipeline specimen: it verifies how a markdown image and HTML5 video/audio are handled along the build chain, for use in visual-regression and multi-device testing (marked hidden — do not list).

## Image (markdown syntax, optimized by sharp at build time)

![Sample photo](../posts/assets/media-sample/sample-photo.jpg)

<p class="fig-cap">The new caption syntax: the fig-cap class — a copy of a specimen shot from the photos directory (1600×2400 portrait).</p>

## Video (raw HTML, H.264 320×240, generated with ffmpeg testsrc2)

<!-- Video/audio use absolute public/media/ paths: relative references in raw HTML bypass the
     bundler (this once caused a verified 404), in line with the writing guide's rule that
     "large videos live in an out-of-repo store under the /media/ namespace" -->

<video controls preload="metadata" width="320" height="240" src="/media/media-sample/sample-video.mp4"></video>

*Native `<video>` control, no JS; source file 45KB, faststart enabled.*

## Audio (raw HTML, 440 Hz sine-wave mp3)

<audio controls preload="metadata" src="/media/media-sample/sample-audio.mp3"></audio>

*Native `<audio>` control; source file 18KB.*