如何免费搭建自己的 movie-web 电影聚合站从克隆到播放的完整指南【免费下载链接】movie-webmovie-web 是一款用于轻松观看电影的网络应用程序。该服务的工作原理是在直观且美观的用户界面中显示来自第三方提供商的视频文件。项目地址: https://gitcode.com/GitHub_Trending/mo/movie-web想在浏览器里看片却不想在十几个视频站点之间来回切换movie-web 是一款开源的电影聚合 Web 应用它把第三方提供商的视频文件统一收进一个干净的界面里播放你可以完全免费地自部署一个实例。下面先把它跑起来再讲日常会用到的功能和自定义方法。 快速上手三步在本机跑起 movie-web先确认环境需要 Node.js 20 和 pnpmnpm i -g pnpm。项目内置了安装校验用 npm 或 yarn 会直接被拦下。克隆仓库并安装依赖git clone https://gitcode.com/GitHub_Trending/mo/movie-web cd movie-web pnpm install配置环境变量并启动cp example.env .env pnpm run dev打开.env填三个值VITE_TMDB_READ_API_KEYTMDB 密钥用来拉取片名、海报、评分等元数据、VITE_CORS_PROXY_URLCORS 代理地址、VITE_APP_DOMAIN本地填http://localhost:5173即可。浏览器打开后就能看到首页。要产出可部署的静态文件运行pnpm build即可。 常用功能体验四个日常最实用的功能搜片首页顶部的搜索栏输入片名结果会带封面和简介直接列出元数据来自 TMDB无需手动筛选来源。多源播放打开一部电影后页面会从多个第三方提供商抓取可用源。某个源打不开或加载慢时可以直接换一个源继续播。播放器的实现集中在 播放器组件目录里面有清晰度、字幕、全屏、画中画等全部控制逻辑。进度自动保存与书签播放进度自动存档关掉页面下次接着看。首页固定展示正在观看和已收藏两个区块如果注册了账户进度和书签可以跨设备同步。播放器设置播放中打开设置菜单可切换字幕语言、调节播放速度、选择清晰度还支持 AirPlay 与 Chromecast 投屏。 按需定制主题、语言与部署配置换主题主题列表目录 下自带 teal、blue、gray、red 四套在应用内设置页即可切换。想加自己的主题复制任意一个.ts文件当模板改色值再注册进themes/all.ts设置里就会出现新选项。换语言多语言资源目录 含 40 余种语言文件中文是zh.json。新增语言时把语言码登记到src/assets/languages.ts具体流程见 src/assets/README.md。服务器部署仓库自带 Dockerfile流程是先pnpm build再用 nginx 托管构建产物。注意两点视频永远不要经过你的服务器转发只代理元数据请求代理地址和域名结尾都不能带斜杠。 技术内幕选读为什么自托管很省钱前端是 React 18 TypeScript Vite状态管理用 zustand集中在 src/stores/ 下按播放、书签、偏好、主题等模块切分样式走 Tailwind CSS翻译走 i18next。架构上整站是纯静态页面所有刮取视频源的工作都在浏览器里完成你的服务器不存任何媒体文件。后端src/backend/accounts/是可选的只管登录和跨设备同步。所以部署成本基本等于一个静态站点加一个代理。⚠️ 踩坑提示新手最容易卡住的三处依赖管理必须用 pnpm Node 20package.json里的 preinstall 脚本会拒绝其他包管理器。URL 结尾斜杠VITE_CORS_PROXY_URL和VITE_APP_DOMAIN末尾多一个/就会导致请求 404排查半天。搜不到片或没有海报先检查 TMDB 密钥是否填对、代理是否可用个别功能行为以仓库 README 为准。部署完成后建议先做一件事随便搜一部电影播两分钟关掉页面再回首页确认正在观看里进度条已经存上——这一步能最快验证你的环境配置是否正确。【免费下载链接】movie-webmovie-web 是一款用于轻松观看电影的网络应用程序。该服务的工作原理是在直观且美观的用户界面中显示来自第三方提供商的视频文件。项目地址: https://gitcode.com/GitHub_Trending/mo/movie-web创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考