🌟摸鱼 TV 搭建属于自己的视频站

cong_2025-04-11 11:31

前言🔉

你是否有时烦恼自己想观看某个电影或者电视找不到资源，或者之前自己看的网站倒闭了，那不妨来自己搭一个视频站🚉！让你的兄弟、好姐妹、女朋友对你眼前一亮！这个项目是根据 maccms10 视频资源规则来实现的，项目是纯前端项目❤️‍🔥，后面我也会给出配合后端方向的改进点，欢迎大家扩展。

项目介绍🤩

项目在线地址🚀：tv.codebug.icu/

项目 Github 地址🔥：github.com/lhccong/fis...

项目是基于 React + Dplayer + Nginx 反代 + maccms10 视频资源规则实现的，目前项目实现了手机端的适配以及可以查看历史内容、切换暗黑模式等基础功能，已经与日常网站播放十分相似。

分类界面

详情界面

播放界面

项目部署操作🍉

基于 Nginx 反向代理

由于有不同的数据源需要操作，而往往这些数据源都涉及了跨域，那么为了避免跨域我直接从 Nginx 反向代理解决了跨域问题。

1、拉取源码到本地：github.com/lhccong/fis... 请给主播点个 star 不要白嫖呀。

bash 复制代码 
git clone  https://github.com/lhccong/fishTV

2、修改数据源。

目前我的数据源有三个，都通过了 Nginx 反向代理来处理，你可以使用我的或者直接自己加上自己的反向代理。

文件位置：src/api/config.ts

修改这几个就是基于maccms10 规则的数据源了，后面我会给出一堆的数据源给大家的。

我 nginx 的反代跨域配置文件也给到大家如下⬇️。

nginx 复制代码 
location ^~ /heimuer {
        proxy_pass https://heimuer.tv/;
        proxy_set_header Host heimuer.tv;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_ssl_server_name on;
​
        # 解决 CORS 问题
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
        add_header Access-Control-Expose-Headers "Content-Length,Content-Range";
​
        # 处理 OPTIONS 预检请求
        if ($request_method = OPTIONS) {
            return 204;
        }
}
location ^~ /ikun {
    proxy_pass https://api.ffzyapi.com/; 
    proxy_set_header Host api.ffzyapi.com; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_ssl_server_name on; 
    # 解决 CORS 问题
    add_header Access-Control-Allow-Origin *; 
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS"; 
    add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range"; 
    add_header Access-Control-Expose-Headers "Content-Length,Content-Range"; 
    # 处理 OPTIONS 预检请求
    if ($request_method = OPTIONS) {
        return 204; 
    }
    add_header Cache-Control no-cache; 
}
location ^~ /subocaiji {
    proxy_pass http://subocaiji.com/; 
    proxy_set_header Host subocaiji.com; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_ssl_server_name on; 
    # 解决 CORS 问题
    add_header Access-Control-Allow-Origin *; 
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS"; 
    add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range"; 
    add_header Access-Control-Expose-Headers "Content-Length,Content-Range"; 
    # 处理 OPTIONS 预检请求
    if ($request_method = OPTIONS) {
        return 204; 
    }
    add_header Cache-Control no-cache; 
}

3、打包项目

css 复制代码 
tsc -b && vite build --outDir dist

生成 dist 就可以丢到服务器访问了

基于 Express 作为反向代理

这个我之前简单实现了下，但是由于我还是比较喜欢静态前端，就没有使用express 作为反向代理的后端，想研究的前端朋友可以自己实现一下，很简单的作为处理，可以直接喊 AI 帮你改都行，不过改完之后要使用 node.js 部署了，不能直接作为静态前端界面运行。

项目实现原理🚀

项目实现很简单就是基于 maccms10 api 来直接读取别人资源站的 json ，但是目前很多地方都没有怎么清晰讲解如何使用，我也是把我了解到的这个 api 的 参数给到大家。具体的官方文档可以直接查看

github.com/magicblack/...

javascript 复制代码 
​
api接口仅供提供数据
​
视频接口同时支持老板xml格式的数据，增加参数 &at=xml即可。
​
1,视频部分
列表http://域名/api.php/provide/vod/?ac=list
详情http://域名/api.php/provide/vod/?ac=detail
同样支持老板xml格式的数据
列表api.php/provide/vod/at/xml/?ac=list
详情api.php/provide/vod/at/xml/?ac=detail
​
2,文章部分
列表http://域名/api.php/provide/art/?ac=list
详情http://域名/api.php/provide/art/?ac=detail
​
3,演员部分
列表http://域名/api.php/provide/actor/?ac=list
详情http://域名/api.php/provide/actor/?ac=detail
​
4,角色部分
列表http://域名/api.php/provide/role/?ac=list
详情http://域名/api.php/provide/role/?ac=detail
​
5,网址部分
列表http://域名/api.php/provide/website/?ac=list
详情http://域名/api.php/provide/website/?ac=detail
​
列表数据格式：
​
{"code":1,"msg":"数据列表","page":1,"pagecount":1,"limit":"20","total":15,"list":[{"vod_id":21,"vod_name":"测试1","type_id":6,"type_name":"子类1","vod_en":"qingjian","vod_time":"2018-03-29 20:50:19","vod_remarks":"超清","vod_play_from":"youku"},{"vod_id":20,"vod_name":"测试2","type_id":6,"type_name":"子类1","vod_en":"baolijiequ","vod_time":"2018-03-27 21:17:52","vod_remarks":"超清","vod_play_from":"youku"},{"vod_id":19,"vod_name":"测试3","type_id":6,"type_name":"子类3","vod_en":"chaofanzhizhuxia2","vod_time":"2018-03-27 21:17:51","vod_remarks":"高清","vod_play_from":"youku"},{"vod_id":18,"vod_name":"测试4","type_id":6,"type_name":"子类4","vod_en":"muxingshangxing","vod_time":"2018-03-27 21:17:37","vod_remarks":"高清","vod_play_from":"youku"},{"vod_id":15,"vod_name":"测试5","type_id":6,"type_name":"子类5","vod_en":"yingxiongbense2018","vod_time":"2018-03-22 16:09:17","vod_remarks":"高清","vod_play_from":"qiyi,sinahd"},{"vod_id":13,"vod_name":"测试6","type_id":8,"type_name":"子类6","vod_en":"piaoxiangjianyu","vod_time":"2018-03-21 20:37:52","vod_remarks":"全36集","vod_play_from":"youku,qiyi"},{"vod_id":14,"vod_name":"测试7","type_id":8,"type_name":"子类7","vod_en":"guaitanzhimeiyingjinghun","vod_time":"2018-03-20 21:32:27","vod_remarks":"高清","vod_play_from":"qiyi"}]}
​
​
列表接收参数：
ac=list
t=类别ID
pg=页码
wd=搜索关键字
h=几小时内的数据
例如： http://域名/api.php/provide/vod/?ac=list&t=1&pg=5   分类ID为1的列表数据第5页
​
​
内容数据格式：
{"code":1,"msg":"数据列表","page":1,"pagecount":1,"limit":"20","total":1,"list":[{"vod_id":21,"vod_name":"测试1","type_id":6,"type_name":"子类1","vod_en":"qingjian","vod_time":"2018-03-29 20:50:19","vod_remarks":"超清","vod_play_from":"youku","vod_pic":"https://localhost/view/photo/s_ratio_poster/public/p2259384068.jpg","vod_area":"大陆","vod_lang":"国语","vod_year":"2018","vod_serial":"0","vod_actor":"主演们","vod_director":"导演","vod_content":"这可是详情介绍啊","vod_play_url":"正片$http://localhost/v_show/id_XMTM0NTczNDExMg==.html"}]}
​
​
​
内容接收参数：
参数 ids=数据ID，多个ID逗号分割。
     t=类型ID
     pg=页码
     h=几小时内的数据
​
例如:   http://域名/api.php/provide/vod/?ac=detail&ids=123,567     获取ID为123和567的数据信息
        http://域名/api.php/provide/vod/?ac=detail&h=24     获取24小时内更新数据信息
​
​
另附上xml返回格式：
列表数据格式：
<?xml version="1.0" encoding="utf-8"?><rss version="5.0"><list page="1" pagecount="23" pagesize="20" recordcount="449"><video><last>2012-05-06 13:32:28</last><id>493</id><tid>9</tid><name><![CDATA[测试]]></name><type>子类1</type><dt>dplayer</dt><note><![CDATA[]]></note><vlink><![CDATA[http://localhost/vod/?493.html]]></vlink><plink><![CDATA[http://localhost/vodplay/?493-1-1.html]]></plink></video></list><class><ty id="1">分类1</ty><ty id="2">分类2</ty><ty id="3">分类3</ty><ty id="4">分类4</ty><ty id="5">子类1</ty><ty id="6">子类2</ty><ty id="7">子类3</ty><ty id="8">子类4</ty><ty id="9">子类5</ty><ty id="10">子类6</ty><ty id="11">子类7</ty><ty id="12">子类8</ty><ty id="13">子类9</ty><ty id="14">子类10</ty><ty id="15">子类11</ty></class></rss>
​
内容数据格式：
<?xml version="1.0" encoding="utf-8"?><rss version="5.0"><list page="1" pagecount="1" pagesize="20" recordcount="1"><video><last>2012-05-06 13:32:28</last><id>493</id><tid>9</tid><name><![CDATA[测试1]]></name><type>恐怖片</type><pic>http://localhost/uploads/20091130205750222.JPG</pic><lang>英语</lang><area>欧美</area><year>2012</year><state>0</state><note><![CDATA[]]></note><type>_9</type><actor><![CDATA[]]></actor><director><![CDATA[Ryan Schifrin]]></director><dl><dd from="qvod"><![CDATA[第1集$http://localhost/1.mp4|]]></dd></dl><des><![CDATA[<p>简单介绍。 <br /></p>]]></des><vlink><![CDATA[http://localhost/vod/?493.html]]></vlink><plink><![CDATA[http://localhost/vodplay/?493-1-1.html]]></plink></video></list></rss>

所用到的 API

获取页面数据列表：heimuer.tv/api.php/pro...

获取分类列表数据：heimuer.tv/api.php/pro...

获取分集列表数据：详情页中获取，heimuer.tv/api.php/pro...

所有基于maccms10 的资源站 API 都是一样的，只有前缀不同：前缀/api.php/provide/vod/?ac=videolist&pg=0&pagesize=10&t=1

资源站接入大全 📚

目前打 ✅ 的是我用到的资源站，其它的资源站感兴趣的朋友可以自己接入一下。

扩展点🌟

  1. 实现用户登录，保存用户的收藏影片以及浏览历史记录。

  2. 自己实现数据库，爬取资源站的内容来实现按年份、地区等视频的分类。

  3. 实现在线一起观看功能，可以创建房间以及聊天，简单思路：通过 ws 同步播放、暂停等操作以及监听房间每个人的视频进度，若与房主有差别，轻微动态聊整播放速度追赶。

    参考：github.com/synctv-org/... 在线体验地址：synctv.006.cloudns.org/web/

最后 ✨

感谢大家看到最后，我是聪 希望可以跟大家一起学习，如果文章对大家有帮助的话不妨给我的新项目摸鱼岛🐟 点个免费的 star 🌟，我的 Github：github.com/lhccong 如果里面有你感兴趣的项目也可以点个星星⭐和关注🔥，未来我还会持续写新的好玩的小项目。

相关推荐
间彧20 小时前
从开发到生产，如何将Docker Compose项目平滑迁移到Kubernetes？
后端
牛奶咖啡1320 小时前
利用Github与Hexo搭建属于自己的在线个人博客
github·hexo创建静态博客·免费部署博客到公网上·创建自定义静态博客·将静态博客上传到github·将自己的网站发布到网上
散峰而望20 小时前
C++入门（一）（算法竞赛）
c语言·开发语言·c++·编辑器·github
间彧20 小时前
如何结合CI/CD流水线自动选择正确的Docker Compose配置？
后端
间彧20 小时前
在多环境（开发、测试、生产）下，如何管理不同的Docker Compose配置？
后端
间彧20 小时前
如何为Docker Compose中的服务配置健康检查，确保服务真正可用？
后端
间彧20 小时前
Docker Compose和Kubernetes在编排服务时有哪些核心区别？
后端
间彧20 小时前
如何在实际项目中集成Arthas Tunnel Server实现Kubernetes集群的远程诊断？
后端
冴羽20 小时前
今日苹果 App Store 前端源码泄露，赶紧 fork 一份看看
前端·javascript·typescript
蒜香拿铁20 小时前
Angular【router路由】
前端·javascript·angular.js
热门推荐
01GitHub 镜像站点02综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件03UV安装并设置国内源04npm使用国内淘宝镜像的方法05Linux下V2Ray安装配置指南06《大数据技术原理与应用》实验报告三 熟悉HBase常用操作07BongoCat - 跨平台键盘猫动画工具08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09GitLab 零基础入门指南：从安装到项目管理全流程10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）