muxinc/next-video

这是什么？

核心功能

• 01通过 sync 命令将本地视频同步到远程存储并自动处理。
• 02大体积视频不进入 git，仅跟踪体积很小的 JSON 元数据文件。
• 03支持 Mux、Vercel Blob、Backblaze、Amazon S3 和 Cloudflare R2 作为存储提供方。
• 04使用 Mux 时自动生成占位封面和时间轴悬停缩略图。
• 05支持自定义播放器主题，也可替换为自定义播放器组件。
• 06提供不含上传功能的独立播放器和背景视频组件。

适用场景

• 在 Next.js 网站中托管产品或宣传视频，同时避免把媒体文件提交到代码仓库。
• 制作不带播放控件的背景视频首屏区域。
• 借助 Mux 为视频提供自适应码率播放和自动字幕。
• 将已有的 S3 或 R2 视频存储接入 Next.js 的构建流程。

快速上手

1. 1

   在 Next.js 项目根目录运行自动初始化

   npx -y next-video init
2. 2

   将 Mux 访问令牌添加到 .env.local

3. 3

   将视频添加到 /videos 目录并同步到远程存储

   npx next-video sync
4. 4

   启动开发服务器并打开演示页面

   npm run dev

使用前须知

• !默认的远程存储和优化功能需要 Mux 账户和访问令牌。
• !/api/video 路由默认无需认证，在生产环境中应加以保护。

标签

常见问题

next-video 是什么？

为 Next.js 应用添加视频的 React 组件，支持自动上传、优化与 CDN 分发。 next-video 是一个面向 Next.js 项目的 React 组件，在原生 video 元素的基础上增加了视频自动优化能力。开发者把视频文件放在本地 /videos 目录，运行 sync 命令即可将其上传到远程存储并完成处理，大体积视频因此不必进入 git 仓库，视频导入的结果可直接交给 Video 组件播放。

next-video 可以免费使用吗？用的什么许可证？

next-video 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

next-video 还在维护吗？

活跃维护中。next-video 最近一次提交是在 2026年11月3日。

next-video 适合用来做什么？

在 Next.js 网站中托管产品或宣传视频，同时避免把媒体文件提交到代码仓库。 制作不带播放控件的背景视频首屏区域。 借助 Mux 为视频提供自适应码率播放和自动字幕。 将已有的 S3 或 R2 视频存储接入 Next.js 的构建流程。

next-video 怎么安装和运行？

在 Next.js 项目根目录运行自动初始化: npx -y next-video init 将 Mux 访问令牌添加到 .env.local 将视频添加到 /videos 目录并同步到远程存储: npx next-video sync 启动开发服务器并打开演示页面: npm run dev

在哪里获取 next-video？

源代码和安装说明在 GitHub 上：https://github.com/muxinc/next-video