跳到主要内容

Web Device · 媒体块

沉浸式视频画廊(Expose 风格)

在文件夹画廊里把封面静图与短视频配对,让 stage/expose/story 的 plate 先显示封面,再无缝进入静音循环。

需要 plate 像 Live Photo 一样呈现时用沉浸式视频:先看到封面静图,视频就绪后再进入静音循环。这仍是同一套文件夹 ::gallery 模型——不是新的 contentType,也不包含 Expose 多边形 / 空间叠加范围。

需要包含 cover+video 沉浸的 Web Device 运行时(arc#3764)。旧构建仍会展开 ::gallery{folder} 并显示封面,但可能不会切到视频。先升级服务端 ARC,再把「只有静图」当成样例损坏。

定尺寸 plate(ratio / width / height)需要含 sized-plate CSS 的运行时;旧构建保持全视口 stage。参数细则:文件夹媒体画廊。

什么时候用

适合沉浸式视频更适合别的做法
全视口 plate,需要轻微运动只要快速扫图 → 用文件夹媒体画廊的浏览布局
文内方形 / 定高运动 plate在 stage 上用 ratio / width / height,不要另造媒体系统
每张 plate 有可循环的短片需要自由排布的运动画板或重型交互视频 UI
封面必须立刻上屏(慢网 / 首屏)单条行内视频 → 普通 Markdown / embed,不必进画廊组

最小示例

markdown
::gallery{folder="plates" layout="expose"}

文内方块 plate(阅读栏内,不必整屏滚动):

markdown
::gallery{folder="plates" layout="expose" ratio="1:1"}
  1. 在内容对象的 content.md 旁创建文件夹(本页使用 plates/)。
  2. 放入同名配对:bay.jpg + bay.mp4(或 .webm / .mov)。
  3. 可选:每文件 sidecar 提供图上说明(title、正文、overlay、tone)。
  4. 使用 layout="expose"(stage 的别名),或 layout="stage" / layout="story"。
  5. 可选:用 ratio、width 和/或 height 定 plate 尺寸(见下)。

本页样例在 ./plates/,封面与视频随仓库发布(无外链)。许可说明见 plates/_ATTRIBUTION.md。

写法:layout

沉浸来自文件夹里的 封面 + 视频配对,不是另一套 layout 引擎。

layout对沉浸配对的作用
exposestage 的别名(Expose 风格命名)
stage全视口 plate + 图上叠加文案(或用下方属性定尺寸)
story全宽滚动 plate;叠加规则相同

浏览布局(grid / mosaic / pair / masonry / film)以及没有视频兄弟的静图 large / stage,仍见文件夹媒体画廊。若浏览布局遇到视频文件,配对规则仍适用;沉浸交互按 stage / expose / story 设计。

写法:plate 尺寸

Stage 默认全视口。文内 demo(方形 Live Photo、16 hero、固定高度)可任选组合:

属性别名示例作用
ratioaspect / aspectRatio1:1 · 16/9 · squareCSS aspect-ratio
widthw24rem · 100% · min(100%,36rem)plate 宽
heighth50vh · 400pxplate 高

只写 ratio 时,宽默认 min(100%, 36rem)。完整参数与错误场景见:文件夹媒体画廊 — 定尺寸 plate。

封面 + 视频配对

同名(Live Photo 式)

静图与视频共用文件名主干:

text
plates/
  01-bay.jpg
  01-bay.mp4
  01-bay.md          # 可选 sidecar

视频扩展名包括 mp4、webm、mov(与封面同名主干)。图片扩展名与画廊静图集合一致(jpg / jpeg / png / webp 等)。

封面是画廊排序与配文的 plate 成员;同名视频是该 plate 的沉浸运动层。

Sidecar video: / poster:

无法同名(或资源改名)时,在 plate sidecar 里声明配对:

markdown
---
title: Bay
overlay: bottom-left
tone: dark
video: clips/bay-loop.mp4
poster: covers/bay.jpg
---

Optional second line on the plate.

video: / poster: 路径在画廊文件夹下解析(条目本地),与其他画廊媒体相同——不是站点级 content/media/。

每个 plate 用同名或显式 sidecar 之一,保持一种清晰配对,方便作者与审阅在文件夹里核对合同。

预期运行时行为

阶段行为
首屏显示封面静图(快速回退)。
视频就绪淡入 / 切换为无缝静音循环。
音频默认静音起播。若片源有音轨,提供 Unmute(需用户手势)。
仅静图 plate无视频兄弟 → plate 保持静图(同一套 stage/story 外壳)。
Lightboxstage / expose / story 默认关(plate 已占满视口)。

本页演示去掉了音轨,静音循环即全部表现;带音轨的片源可以发布——预期是 Unmute,而不是带声自动播放。

与其他画廊模式的区别

维度浏览布局仅静图的 stage/story沉浸式封面+视频
用途扫一组图;可选 lightbox全视口静图 plate可运动的全视口 plate
媒体图片为主仅封面 / 图片封面 + 配对短循环
说明通常在图下sidecar 图上叠加与 stage/story 相同的图上叠加
运动默认无无封面之后的静音循环

不要把 Expose 多边形蒙版、多层空间叠加或独立「expose contentType」写进 ::gallery——超出本块范围。

可运行样例

以下均使用本页的 folder="plates"。

文件夹成员:

文件作用
01-bay.jpg + 01-bay.mp4同名沉浸配对
02-sky.jpg + 02-sky.mp4同名沉浸配对
03-bloom.jpg + 03-bloom.mp4同名沉浸配对
04-still.jpg仅静图 plate(对照)

Expose 定尺寸方块(ratio="1:1")

文内 demo:同一配对,约束尺寸。

markdown
::gallery{folder="plates" layout="expose" ratio="1:1"}

先显示封面静图;有配对视频时,运行时无缝切入静音循环。

Expose 全视口(layout="expose")

markdown
::gallery{folder="plates" layout="expose"}

先显示封面静图;有配对视频时,运行时无缝切入静音循环。

Stage(同样沉浸;expose 是别名)

markdown
::gallery{folder="plates" layout="stage"}

先显示封面静图;有配对视频时,运行时无缝切入静音循环。

Story(滚动 plate;配对规则相同)

markdown
::gallery{folder="plates" layout="story"}

先显示封面静图;有配对视频时,运行时无缝切入静音循环。

应看到的效果(arc#3764+): plate 01–03 先封面再静音循环视频;plate 04 保持静图。叠加标题来自 sidecar。定尺寸方块样例把同样沉浸收进阅读栏盒子。旧版 ARC 仍会渲染封面与静图;运动或定尺寸可能要等运行时升级后才出现。

错误与空状态

情况结果
有封面无视频静图 plate(合法)
有视频无封面 / poster取决于运行时配对规则——建议始终提供封面
视频损坏或不可读保留封面;不要只留下破损的空 <video>
缺失 folder / 路径穿越与文件夹媒体画廊相同的拒绝规则
运行时无沉浸封面与画廊展开可能仍可用;缺运动当作版本缺口,不是文件夹写错
运行时无 sized-plate CSSstage 仍全视口;ratio / width / height 无视觉效果
非法尺寸属性忽略属性;沉浸展开仍适用

边界

  • 仍是同一个 ::gallery 指令与条目本地文件夹模型——没有新 contentType。
  • expose 是 stage 的别名;沉浸来自配对,不是并行产品。
  • 不是 AUP photo-story,不是站点级媒体库,不是 Expose 多边形 / 空间叠加。
  • 不在本页写价格、token 价值或未实现的叠加产品。

相关