NEBULA UI · 功能 02 / 07

播放与观看

观看是产品的核心场景,这一模块覆盖三种观看形态:标准播放页(长视频,横屏投屏、章节点、简介折叠)、 短视频全屏流(上下滑,右侧竖排互动栏)、合集与章节(把长视频拆成可跳播的片段)。 交互上统一了「点赞 / 评论 / 分享 / 稍后观看」四个高频动作的落位:竖屏在右侧竖排,横屏在标题下方横排, 保证同一心智模型在两种形态间迁移。

Tailwind CSS CDN Lucide Static CDN Unsplash 375 × 812 玻璃拟态 页面内无滚动条

2.1 · 标准播放页

视频封面
6:52 / 18:22

在东京街头做一次即兴合辑,录了 47 条

128.4 万次观看 · 3 天前 · #街头音乐 #即兴

3.2 万 1.8 万 924 分享 下载 收藏
声

声音实验室

128 万粉丝 · 已订阅

已订阅

街头即兴最好的部分是不可控。我们定了三个机位,录了 47 条,最后用 18 分钟讲完一件事: 声音如何在陌生空间里找到自己的位置。

00:00 开场 · 03:12 第一条 · 08:40 合流 · 15:20 收尾

展开简介(1.2 万字)

接下来播放

自动播放已开
舞池 42:05

一整晚的地下舞池,摄像机位图鉴

低频研究所

音乐节 1:02:33

音乐节全纪录 Day 2(多机位)

现场笔记

小演出 24:18

地下室的 20 人小演出,门票 30 块

小场地

封面内嵌播放控件 + 标题区 + 互动横排 + 创作者卡 + 简介 + 相关推荐

2.2 · 短视频全屏流

短视频画面
关注
推荐 关注

@在东京弹吉他

街头第 12 天,今天终于有人跟着一起唱了… #街头音乐 #即兴

声音实验室 · 6.2 万
#街头音乐 #东京 #即兴
3.2 万 924 收藏 分享 声

全屏沉浸 + 右侧竖排互动栏 + 顶部推荐/关注切换,向上下滑动切换

2.3 · 合集与章节

合集封面

合集

声音实验室 · 从零开始

12 集 · 共 3 小时 41 分

章节

按热度排序
第 1 集

第 1 集 · 先听懂一首歌的结构

18:22 · 24.6 万次观看

已看完

第 2 集

第 2 集 · 频率与听感的错觉

16:08 · 18.2 万次观看

看到 11:02

第 3 集

第 3 集 · 混音里的空间感

21:40 · 31.4 万次观看

未开始

第 4 集

第 4 集 · 压缩与响度的战争

14:55 · 12.8 万次观看

未开始

合集播放

从第 3 集继续

继续

合集头图 + 章节进度条 + 一键续播,长视频拆成可跳播的片段