### [纯前端的影视搜索网站，哄女友必备](https://pmself.com/article/3213)
**Published:** 2023-12-08T07:42:51
**Author:** crawlpw
**Excerpt:** 声明：仅供学习交流,勿作他用。CSM影视原理 最开始做一个影视网站成本是很高的，需要把电影都存起来还要巨大的带…
声明：仅供学习交流,勿作他用。
**CSM影视原理**
- 最开始做一个影视网站成本是很高的，需要把电影都存起来还要巨大的带宽。近几年影视采集站的兴起，影视网站也如同雨后春笋般崛起。
下图为市面上的cms影视站的原理
**纯前端影视搜索站原理**
- 我们做的这个影视搜索网站也是建立在影视采集站的基础之上的，通过采集站提供的API来获取各个电影电视剧的播放地址，然后在我们的页面嵌入一个iframe把地址放进去就能愉快的追剧了。
- 但是我们不是通过服务器去访问采集站的API，而是通过客户端浏览器自己去发送ajax请求去访问采集站的数据。获取到播放地址之后直接在页面上显示出来。
- 但是这里就会涉及到跨域请求的问题了，我们的域名和采集站的域名是不一致的，js访问会报错。解决办法就是在服务器端设置允许跨域访问，可是采集站的服务器又不是我们控制的，我们该怎么办呢？
- 于是我找了十几家采集站，试了非常多的API终于找到了一个允许跨域访问的API接口（接口地址在下面的源码中）。
下图为纯前端影视搜索站原理。
**总体功能和框架**
博主比较懒只写了一些比较基本的功能。如果感兴趣的可以复制源码自行修改。
- 引用类库：bootstrap4、jquery3.5
- 基本UI设计：搜索框、搜索按钮、历史记录标签、播放剧集列表、视频播放区域。
- 功能实现：影视搜索、搜索敏感词过滤、播放选集、上一集下一集、本地保存历史播放记录
- 演示站点：http://www.kubuku.cool/
**源码**
为了方便新手看得明白，博主在关键的地方都加了注释。————————————————
```
酷不酷影视
Loading...
```
**Tags:** 影视搜索
**Categories:** 周边资源, 开源项目
---