WowTube - OTT Platform & Video Streaming HTML Template

# 项目简介 WowTube 是一套基于 Bootstrap 5 的 OTT 视频流媒体平台 HTML 模板，提供电影、剧集、综艺等多种内容展示页面，适用于快速搭建在线影视平台或视频点播网站。模板包含 3 个首页变体及完整的详情页、新闻、定价、团队等附加页面。 ## 技术栈 - HTML5 + CSS3（原生样式 + SCSS 源码） - Bootstrap 5（响应式布局框架） - jQuery（DOM 操作与交互） - Swiper.js（轮播与幻灯片） - Magnific Popup（图片/视频弹窗） - MeanMenu（移动端导航） - Nice Select（自定义下拉框） - WOW.js（滚动动画） ## 项目结构 ``` wowtubehtml-10/ └── Main files/ ├── index.html # 首页（主） ├── index-2.html # 首页变体 2 ├── index-3.html # 首页变体 3 ├── movie.html # 电影列表页 ├── movie-details.html # 电影详情页 ├── tv-shows.html # 综艺/剧集列表 ├── tv-shows-details.html ├── web-series.html # 网络剧列表 ├── web-series-details.html ├── news.html # 资讯列表 ├── news-details.html ├── pricing.html # 定价方案 ├── about.html # 关于我们 ├── team.html # 团队成员 ├── contact.html # 联系页面 ├── login.html # 登录页 ├── 404.html # 错误页 ├── cooming-soon.html # 即将上线页 └── assets/ ├── css/ # 编译后样式（含 main.css.map） ├── scss/ # SCSS 源码 ├── js/ # 脚本文件 └── img/ # 图片资源 ``` ## 核心文件说明 - `Main files/index.html` — 主首页入口，包含轮播区、精选内容、CTA 等模块 - `assets/css/main.css` — 完整编译样式，定义了主题色、排版、布局等所有视觉规则 - `assets/scss/` — SCSS 源码目录，按模块（_header.scss、_hero.scss、_movie.scss 等）组织，便于定制主题 - `assets/js/main.js` — 交互逻辑：导航初始化、弹窗、轮播、计数器等插件的调用配置 - `assets/css/bootstrap.min.css` — Bootstrap 5 核心框架，提供栅格系统与基础组件 - `assets/css/color.css` — 主题色变量文件，定义了 CSS 自定义属性（`--theme`、`--theme2` 等） ## 快速开始 1. 进入 `Main files` 目录，直接在浏览器中打开 `index.html` 即可预览全部页面。 2. 如需本地服务器（推荐），可使用任意静态服务器工具，例如： ```bash # Python 3 cd wowtubehtml-10/Main\ files python -m http.server 8080 # 或使用 VS Code Live Server 插件 ``` 3. 模板内含完整 SCSS 源码，修改样式后可重新编译为 `main.css`。 ## 使用建议 - 视频播放功能需要自行对接后端播放器或第三方服务（如 Video.js、DPlayer），当前模板仅提供视频弹窗预览。 - 移动端菜单依赖 MeanMenu 插件，`assets/js/main.js` 中已默认初始化，若页面无移动菜单需检查 `#mobile-menu` 元素是否存在。 - SCSS 模块化程度高，建议在 `_color.scss` 或 `color.css` 中统一管理主题色，便于后期品牌换肤。