岛屿通信测试：图文、音乐与视频的一次完整旅行

这是一篇公开的功能巡检文章：用一段完整的小岛旅行，检查图片、长文排版、代码块、音乐和视频在 Nova 主题中的实际表现。所有媒体都不会自动播放。

{message type="success" content="岛屿通信站已连接：图片、音频、视频与代码高亮将依次接受检查。"/}

01｜从码头出发

清晨的第一班船靠岸后，先沿着木栈道走到岛屿通信站。日景图用作文章封面，下面的夜景图则负责测试正文图片、圆角、说明文字与移动端缩放。

同一座岛在夜色下的状态。图片来自本站 Nova 主题原创素材。

排版观察清单

• 标题层级保持清楚，不用超长段落制造阅读压力；
• 图片带有替代文字，媒体控件可由键盘操作；
• 音乐与视频只预加载元数据，不自动播放；
• 代码块使用高对比度的现代深色配色。

检查项	预期结果	实际用途
图片	清晰加载且不撑破正文	验证封面、正文图和替代文字
音乐	显示控件但不自动播放	验证音频元数据与窄屏布局
视频	保持 16:9 比例并可全屏	验证播放、暂停和响应式尺寸
代码	前景与背景有足够对比度	验证高亮与复制按钮

const islandStatus = {
  images: 'ready',
  audio: 'ready',
  video: 'ready',
  autoplay: false,
};

console.table(islandStatus);

02｜在海风里听一段音乐

戴上耳机后再点击播放。这里使用 SoundHelix 提供的示例音乐文件，主要验证音频控件、加载状态和窄屏布局。

{mp3 name="SoundHelix Song 1 · 岛屿巡检音轨" url="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"/}

音频来源：SoundHelix 示例音乐。如果网络暂时不可用，正文仍应完整显示，并保留原生控件的降级能力。

03｜在露天影院看一段预告

夜幕降临后，通信站旁的草地变成露天影院。视频使用 W3C HTML5 媒体演示中的 Sintel 预告片，用来检查播放、暂停、拖动进度、全屏与移动端适配。

{dplayer src="https://media.w3.org/2010/05/sintel/trailer.mp4"/}

视频来源：W3C HTML5 Video Events and API，素材鸣谢 Blender Foundation 与 Sintel 社区。

如果播放器暂时无法加载，也可以直接访问视频后备地址。

04｜返航前的验收

{progress percentage="100%" color="#62c7be"/}

本次测试覆盖了两张站内配图、引用、列表、三级标题、JavaScript 代码块、外链音乐和 HTML5 视频。后续如果某一种媒体失效，可以直接回到这篇文章复现，而不需要拿真实内容反复试错。

小岛广播：功能测试文章也应该像正常文章一样好读，而不是堆满没有上下文的控件。