介绍 Dufs Media：一个通过 dufs --assets 接入的图片和视频浏览前端，支持缩略图、详情预览、循环播放、上传和按日期排序。

最近需要把一批图片和视频放在局域网里浏览。dufs 很适合做文件服务，上传、下载、权限和 HTTP Range 都已经有了，但默认界面更偏文件列表，找视频时还是得先看文件名。

我不想 fork dufs，也不想为了缩略图和播放器再写一套后端，于是做了 Dufs Media。它是一个独立的静态前端，通过 dufs 官方的 --assets 参数接入。

没有改 dufs 后端

dufs 启动时会把当前目录、文件列表和权限信息注入页面。Dufs Media 直接读取这些数据，再换成适合浏览媒体的界面，后端仍然是原来的 dufs。

构建后，把 dist 目录交给 --assets 就可以运行：

pnpm install
pnpm build
dufs /path/to/files --assets /path/to/dufs-media-assets/dist

上传按钮也沿用 dufs 的权限结果。只读用户看不到上传入口，允许上传时才会显示按钮和上传日志。目录下载同样跟着后端权限走，没有在前端另做一套判断。

浏览目录时先看到内容

图片直接显示缩略图，视频会读取元数据并取开头的画面作为封面，左下角显示上传日期。目录可以按名称、日期和大小排序，也可以筛选当前文件夹。

目前缩略图仍由浏览器加载原图后缩放。dufs 没有提供缩略图生成接口，所以图片很多或原文件很大时，网络和浏览器的压力会比较明显。这类场景后面需要单独的缩略图服务，前端本身解决不了。

图片和视频使用同一套预览方式

点开图片或视频后，文件名、序号、下载和关闭按钮都放在顶部，左右按钮负责切换同一目录里的媒体。图片可以自动轮播，视频播放结束后会继续播放下一条；画面按可用高度完整显示，竖屏视频也不需要滚动页面。

详情状态会写进 URL 的 preview 参数。刷新页面后仍然是当前文件，也可以直接把链接发给别人。关闭详情时，URL 会恢复成目录地址。

MOV 能不能播放，最后还是看编码

做视频支持时，MOV 是最容易误判的一类文件。Safari 通常能直接播放，Chrome 对 video/quicktime 的能力检测可能返回空字符串，但装着 H.264 视频的 MOV 又确实能播。

Dufs Media 没有在加载前拦截 MOV，而是让浏览器实际请求文件，再根据播放器返回的错误显示提示。这样不会因为一次不准确的能力检测，把本来能播放的视频挡掉。

项目不做静默转码。浏览器不支持文件里的容器或编码时，会明确报错；需要跨浏览器稳定播放的内容，仍然适合提前转成 H.264 MP4。

当前的发布方式

代码已经放在 GitHub。它目前更适合作为 dufs 的自定义静态资源来构建和部署，没有修改 dufs 源码，也不要求官方仓库合并改动。

对我来说，这个版本已经能解决日常浏览目录里的照片和视频、连续播放以及上传的问题。后面如果媒体数量继续增加，最需要补的是服务端缩略图，而不是继续往页面里堆功能。