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

本篇为三媒管线样张：验证 markdown 图片、HTML5 视频/音频在构建链路中的处理，供视觉回归与多端适配测试使用（hidden 标记，勿收录）。

## 图片（markdown 语法，构建期经 sharp 优化）

![样例照片](./assets/media-sample/sample-photo.jpg)

<p class="fig-cap">图注新写法：fig-cap 类，photos 目录样片副本（1600×2400 竖幅）。</p>

## 视频（raw HTML，H.264 320×240，ffmpeg testsrc2 生成）

<!-- 视/音频走 public/media/ 绝对路径：raw HTML 相对引用不经打包器（曾实测 404），
     与写作指南“大视频走仓外 store 的 /media/ 命名空间”对齐 -->

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

*原生 `<video>` 控件，无 JS；源文件 45KB，faststart 已开启。*

## 音频（raw HTML，440Hz 正弦波 mp3）

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

*原生 `<audio>` 控件；源文件 18KB。*